使用jquery提交表单而不导航到另一个屏幕

Question

我试图让表单提交不会导致页面导航并使用ajaxSubmit来提交内容。但是，当我单击提交按钮时，它仍然导航到表单的action属性中的页面。继承人的JavaScript：

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

和继承人的形式：

<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

使用event.preventDefault()

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

Answer 2

另一种选择是将输入的HTML标签更改为<input id="save" type="Button" value="submit" />它给你一个按钮，做除了提供一个JavaScript钩子。

使用以下javascript来AJAX提交表单

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

在这一过程中你失去按enter提交表单的能力。你可以用下面的jquery来解决这个问题：

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