Invia un modulo utilizzando jquery senza passare a un'altra schermata
Domanda
Sto provando a fare in modo che un modulo non invii la pagina a navigare e utilizzi ajaxSubmit per inviare il contenuto. tuttavia, quando faccio clic sul pulsante di invio, viene comunque visualizzata la pagina nell'attributo action del modulo. Ecco il javascript:
var options = {
success: processLogin
};
$('#loginform').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
ed ecco il modulo:
<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>
Soluzione
$('#loginform').submit(function(e) {
e.preventDefault();
$(this).ajaxSubmit(options);
});
Altri suggerimenti
Un'altra opzione è quella di cambiare il tag html di input in <input id="save" type="Button" value="submit" />
che ti dà un pulsante che non fa altro che fornire un hook javascript.
Usa il seguente javascript per inviare ajax il tuo modulo
$("#save").click(function() {
$("#loginform").ajaxSubmit();
}
In questo modo perdi la possibilità di inviare il modulo premendo invio. Puoi superarlo con il seguente jquery:
$("input").keypress(function(e) {
if (e.which == 13) {
$("#save").click();
}
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow