使用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(); 
    } 
});