Question

我有一个表单，在输入文本框中我输入一个数字并按ENTER键，我使用jQuery将值附加到textarea。一切正常。

我遇到的问题是，如果我添加一个提交按钮来提交表单，只要我按下ENTER键，它就会提交表单。

我想要它做的不是在按Enter键时提交表单，而是仅在单击提交按钮时提交表单。

我已经尝试过使用preventDefault（）并返回false，这将停止按Enter键提交表单但是如果我在提交按钮上添加一个click事件来提交表单，它什么都不做。我在提交之前在点击功能中发出警报，然后触发，但表单不提交

<form id="toteform" method="post" action="blah.php">
    <input type="text" name="bin" id="bin" maxlength="4" autocomplete="off" />

    <input type="text" name="totes" id="tote" maxlength="4" autocomplete="off" />

    <input type="button" name="submit" class="submit" id="submit" value="Submit" />
</form>

的jQuery

$("#submit").click(function() {
    $('#toteform').submit();
});

$('#bin').focus();

$('#bin').keypress(function(e) {
    if(e.which == 13) {
        $('#tote').focus();
    }
});

$('#tote').keypress(function(e) {
    if(e.which == 13) {

    // more code here to do other things

Answer 1

小心e.originalEvent.explicitOriginalTarget.id方法。它仅适用于Gecko based browsers。

相关answer。

会使用评论，但我没有足够的声誉：（

Answer 2

您可以阻止表单提交

$("#toteform").on('submit',function(e) {
    e.preventDefault();
});

点击提交按钮，您可以手动提交表单。

$("#submit").click(function() {
    $('#toteform').submit();
});

Answer 3

我找到了解决方案

$("#toteform").submit(function(e) {
    if (e.originalEvent.explicitOriginalTarget.id == "submit") {
        // let the form submit
        return true;
    }
    else {
        //Prevent the submit event and remain on the screen
        e.preventDefault();
        return false;
    }
});

jQuery，阻止表单提交从输入但允许通过按钮单击提交表单

3 个答案: