Vraag Hoe vermijd je het vernieuwen van de pagina in een bootstrap modal?


Hier is de code voor mijn modal in twitter bootstrap:

<div class="modal-body">
<form class="form-horizontal" method="POST" name="loginForm" id="loginForm">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
  <div class="input-prepend">
    <span class="add-on"><i class="icon-envelope"></i></span>
    <input class="span2" id="inputIcon" type="text" name="email"/>
  </div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
  <div class="input-prepend">
    <span class="add-on"><i class="icon-lock"></i></span>
    <input class="span2" id="password" type="password" name="password"/>
  </div>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
</form>
<button type="submit" class="btn" id="signin_button">Sign in</button>
</div>
</div>

Telkens wanneer ik op de knop Sign In druk, wordt de pagina opnieuw geladen. Hoe kan ik mogelijk het vernieuwen van de pagina uitschakelen door op de knop te klikken?


15
2018-02-18 14:11


oorsprong


antwoorden:


U kunt het standaardgedrag van de knop die de pagina verzendt, voorkomen.

Hier is een link naar het Mozilla Developer Network op "preventDefault": event.preventDefault

In jQuery kun je dit als volgt doen:

$("#signin_button").on("click", function(e) {
    e.preventDefault();

    // the rest of your code ...
});

20
2018-02-18 14:15



Probeer het invoertype = "submit" te wijzigen in a

<button class="btn" id="signin_button">Sign in</button> 

of

<input type="button" class="btn" id="signin_button" value="Sign in"/>

als uw doel niet is om het formulier in te dienen.

Kan ook nuttig zijn: Verschil tussen <input type = 'button' /> en <input type = 'submit' />


15
2018-02-18 14:26



Je kunt click ook gebruiken:

$("#signin_button").click(function (e) {
  e.preventDefault();
  // code
}

1
2017-07-12 16:15