Envie um formulário usando jQuery sem navegar para outra tela
Pergunta
Estou tentando fazê -lo para que um formulário envie não faça com que a página navegue e use o AjaxSubmit para enviar o conteúdo. No entanto, quando clico no botão Enviar, ele ainda navega para a página no atributo de ação do formulário. Aqui está o javascript:
var options = {
success: processLogin
};
$('#loginform').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
e aqui está o formulário:
<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>
Solução
$('#loginform').submit(function(e) {
e.preventDefault();
$(this).ajaxSubmit(options);
});
Outras dicas
Outra opção é alterar a tag html de entrada para <input id="save" type="Button" value="submit" />
O que fornece um botão que não faz nada, exceto fornecer um gancho JavaScript.
Use o seguinte JavaScript para Ajax Envie seu formulário
$("#save").click(function() {
$("#loginform").ajaxSubmit();
}
Ao fazer isso, você perde a capacidade de enviar o formulário pressionando Enter. Você pode superar isso com o seguinte pedaço de jQuery:
$("input").keypress(function(e) {
if (e.which == 13) {
$("#save").click();
}
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow