Envíe un formulario usando jquery sin navegar a otra pantalla
Pregunta
Estoy tratando de hacer que el envío de un formulario no haga que la página navegue y use ajaxSubmit para enviar el contenido. sin embargo, cuando hago clic en el botón Enviar, aún se navega a la página en el atributo de acción del formulario. Aquí está el javascript:
var options = {
success: processLogin
};
$('#loginform').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
y aquí está 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>
Solución
$('#loginform').submit(function(e) {
e.preventDefault();
$(this).ajaxSubmit(options);
});
Otros consejos
Otra opción es cambiar la etiqueta html de entrada a <input id="save" type="Button" value="submit" />
que le da un botón que no hace nada excepto proporcionar un enlace de JavaScript.
Use el siguiente javascript para enviar su formulario ajax
$("#save").click(function() {
$("#loginform").ajaxSubmit();
}
Al hacer esto, pierde la capacidad de enviar el formulario presionando enter. Puede superar esto con la siguiente pieza de jquery:
$("input").keypress(function(e) {
if (e.which == 13) {
$("#save").click();
}
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow