Question

我有点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>

Answer 1

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

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

Answer 2

您的按钮类型设置为按钮。如果要绑定到提交事件，则需要将按钮作为输入，并将其类型设置为type="submit"。

Answer 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，例如submit，length或method。名称冲突可能导致混乱的故障。有关规则的完整列表以及检查这些问题的标记，请参阅DOMLint。

（jQuery docs）

理想情况下，找出导致提交不起作用的任何内容并使用它。

Answer 4

阻止提交发生：

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

Answer 5

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

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

Answer 6

这样做：

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

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

6 个答案: