Invia un modulo utilizzando jquery senza spostarsi su un'altra schermata

Question

Sto tentando di fare in modo che un modulo di invio non causi la navigazione della pagina e usi ajaxSubmit per inviare il contenuto. tuttavia quando faccio clic sul pulsante di invio, continua a navigare nella pagina nell'attributo action del modulo. Heres il javascript:

var options = { 
    success: processLogin 
}; 
$('#loginform').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
}); 

e heres la forma:

<form id='loginform' action='login.php' method='post'> 
    <table id='logintable'> 
     <tr> 
      <td>Room:</td> 
      <td><input id='roomname' type='text' name='roomname' /></td> 
     </tr> 
     <tr> 
      <td>Nickname:</td> 
      <td><input id='nickname' type='text' name='nickname' /></td> 
     </tr> 
     <tr> 
      <td colspan='2' class='center'><input type='submit' value='Submit' /></td> 
    </table> 
</form> 

Answer 1

Usa event.preventDefault()

$('#loginform').submit(function(e) { 
    e.preventDefault(); 
    $(this).ajaxSubmit(options); 
}); 

Answer 2

Un'altra opzione è quella di cambiare il tag input html <input id="save" type="Button" value="submit" /> che ti dà un pulsante che fa nulla tranne fornire un hook javascript.

Usare il seguente javascript all'Ajax inviare il modulo

$("#save").click(function() { 
    $("#loginform").ajaxSubmit(); 
} 

In questo modo si perde la capacità di inviare il modulo premendo Invio. È possibile superare questo con il seguente pezzo di jquery:

$("input").keypress(function(e) { 
    if (e.which == 13) { 
     $("#save").click(); 
    } 
});