使用 Jquery 提交表单，按钮可以工作，但不能按“输入”答案

【问题标题】：Submitting A form With Jquery, button works but not on 'enter' press使用 Jquery 提交表单，按钮可以工作，但不能按“输入”
【发布时间】：2011-08-08 20:42:43
【问题描述】：

我有一些 jquery 正在为我提交电子邮件注册表单。当用户单击按钮时一切正常，但是当点击输入时，表单似乎试图通过 html 而不是通过 jquery 提交，并且您被带到表单应该发布的位置。我曾尝试使用 .submit 而不是 .click，但这似乎不起作用

$('#email-signup-button').click(function () {
        var email = $('#email-address').val();

        // Check to see if field is blank
        if (email.length < 1) {
            errorLog += ('Please provide an email address.');
            errorCount++;
        }

        // If field is email address, check w/ regex
        if (email.match(emailRegex) == null) {
            if (errorCount == 0) {
                errorLog += ('Email address is invalid.\nPlease verify.');
                errorCount++;
            }
        }

        if (errorCount > 0) {
            alert(errorLog);
            errorCount = 0;
            errorLog = "";
        }
        else {
            $.post("/Home/AddEmail", { emailAddress: email });

            alert('Thank you for signing up!');
            $('#email-address').val("");
            $('#email-signup').hide();
            $('.lb_overlay').hide();
        }

        return false;
    });
}


        <div id="email-signup">
            <h2>
                Content Phrase
            </h2>
            <div class="email-deals-close-button">
            </div>
            <p>
                More Content</p>
            <form action="/Home/AddEmail" class="clearfix" method="post">
            <p class="sign-up">
                <label class="placeholder" for="email-address">
                    some@email.com</label>
                <input type="text" id="email-address" name="email-address" value="" />
            </p>
            <button id="email-signup-button" type="button" class="green-action-button">
                Submit</button>
            </form>
        </div>

【问题讨论】：

标签： jquery forms submit

【解决方案1】：

您应该附加到表单本身的提交事件而不是单击按钮。

 $("#formid").submit(//your function here);

【讨论】：

【解决方案2】：

您已将按钮类型设置为按钮。如果你想绑定一个提交事件，你需要你的按钮是一个输入并且它的类型是type="submit"。

【讨论】：

【解决方案3】：

电子邮件注册按钮是表单的提交按钮（即type="submit）吗？如果没有，它应该是这个工作。如果您不希望这样，您可以在捕获输入的窗口上设置一个事件并将其定向到该按钮的单击事件：

 $(window).bind('keypress', function(e){
   if ( $( e.originalTarget ).is( ':input' ) && e.keyCode == 13 ) {
     $(#email-signup-button").click();
     e.preventDefault();
   }
 });

(code source)

还有一个地方是潜在的名称冲突错误，这些错误可能会导致令人困惑的问题：

表单及其子元素不应使用与表单属性（例如提交、长度或方法）冲突的输入名称或 ID。名称冲突可能会导致令人困惑的失败。有关规则的完整列表并检查这些问题的标记，请参阅DOMLint。

(jQuery docs)

理想情况下，找出导致提交不起作用的原因并使用它。

【讨论】：

id="email-signup-button" ，是的，这是我的电子邮件注册按钮
@Lawrence - 但它是<input type="submit" />吗？似乎没有，这意味着.submit() 不会按预期工作。如果您不想使用提交按钮，那么我提供的窗口输入修复将起作用。
是他们输入电子邮件的输入
@Lawrence - 按钮是我关心的问题。您将其设置为常规按钮，而不是提交按钮。
好吧，我认为我不需要将其设置为我想我可以只使用一个按钮标签并在 jquery 中调用该按钮

【解决方案4】：

防止提交发生：

$('#your_form_id').submit(function() {
  return false;
});

【讨论】：

文森特提到的问题。他正在将句柄添加到按钮单击而不是表单提交。
啊，好吧。这更有意义。

【解决方案5】：

您可以改为绑定到表单的提交事件。

$('#myForm').submit(function(){ /* do stuff */ });

【讨论】：

【解决方案6】：

这样做：

$("form").submit(function(e){
e.preventDefault();return false;
});

【讨论】：