Come evitare di aggiornare la pagina in un modal bootstrap?

Question

Ecco il codice per il mio modale 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> 

Ogni volta che si preme il pulsante Accedi si ricarica la pagina. Come posso disabilitare la pagina di aggiornamento dopo aver fatto clic sul pulsante?

Answer 1

È possibile impedire il comportamento predefinito del pulsante che invia la pagina.

Ecco un link al Mozilla Developer Network su "preventDefault": event.preventDefault

In jQuery si può fare questo in questo modo:

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

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

Answer 2

provare a cambiare il tipo di input = "submit" ad un

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

o

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

se il tuo obiettivo non è inviare il modulo.

può anche essere utile: Difference between <input type='button' /> and <input type='submit' />

Answer 3

È possibile utilizzare anche cliccare:

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