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

【问题标题】：Submit a form using jquery without navigating to another screen使用 jquery 提交表单而不导航到另一个屏幕
【发布时间】：2009-04-28 22:33:16
【问题描述】：

我正在尝试使表单提交不会导致页面导航并使用 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>

【问题讨论】：

标签： jquery forms

【解决方案1】：

使用event.preventDefault()

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

【讨论】：

【解决方案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();
    }
});

【讨论】：

当有人在表单上按 Enter 时会发生什么？