Question

HTML：

<form id="form" action="/" method='post'>
<button>Button</button>
<input type="text">
<input type="submit" id="send-form" value="Send">
</form>

JS：

$('#form').submit(function() {
    console.log('send');
    return false;
});

为什么当我按下Button时，表单已提交（我需要此元素进行其他操作）？如何防止这种情况？

Answer 1

<button>的默认操作是提交按钮，但您可以通过执行以下操作将其设为“正常按钮”：

<button type="button">Button</button>

有关详细信息，请参阅HTML specs。

Answer 2

尝试添加onclick侦听器：

<button onclick="return false;">Button</button>

那应该阻止按钮提交表单。通过该技巧，点击操作被取消。

Answer 3

对于没有console对象的浏览器 - 例如IE，它失败了。

只需将其与try..catch一起打包，它就适用于所有浏览器：

$('#form').submit(function() {
    try {
        console.log('send');
    }
    catch (e) {
    }

    return false;
});

Live test case

编辑：更好的是，即使没有控制台的浏览器，您也可以编写自己的功能来显示消息：

function Log(msg) {
    if (typeof console != "undefined" && console.log) {
        console.log(msg);
    } else {
        var myConsole = $("MyConsole");
        if (myConsole.length == 0) {
            myConsole = $("<div></div>").attr("id", "MyConsole");
            $("body").append(myConsole);
        }
        myConsole.append(msg + "<br />");
    }
}

$('#form').submit(function() {
    Log('send');

    return false;
});

当控制台不可用时，这会将消息附加到文档本身。 Updated fiddle

Answer 4

<form id="form" action="/" method='post'>
<input type="button" value="Button">
<input type="text">
<input type="submit" id="send-form" value="Send">
</form>

这将创建＆＃34; not-submitting＆＃34;按钮。示例：http://jsfiddle.net/R3UrK/1/

如何防止表单提交非提交按钮？

4 个答案: