Question

我发现当我通过按Enter键提交表单时，页面会刷新（因为我的表单没有指定操作），但是如果我单击按钮，它会执行jQuery。

如何按回车键按下执行jQuery？

这是我的代码：

<form id="signup-form">
    <input type="text" id="text-input-splash" class="text-input" placeholder="Enter your email"><button type="button" id="submit-input-splash">Sign me up</button>
</form>
<p id="validation-message"></p>
<p>100% private and free. No spam. One-click unsubscribe.</p>
<script>
    $(document).ready(function(){
        $("#submit-input-splash").click(function() {
            // import email variable
            var email = $("#text-input-splash").val();
            $.post("signup.php", {email: email}, function(data){
                $("#validation-message").text(data).addClass("error-text");
            });
        });
    });
</script>

Answer 1

要解决问题并改进逻辑，请将按钮更改为type="submit"并将事件处理程序挂钩到表单的submit事件。试试这个：

<form id="signup-form">
  <input type="text" id="text-input-splash" class="text-input" placeholder="Enter your email">
  <button type="submit" id="submit-input-splash">Sign me up</button>
</form>
<p id="validation-message"></p>
<p>100% private and free. No spam. One-click unsubscribe.</p>

$(document).ready(function(){
  $("#signup-form").submit(function(e) {
    e.preventDefault();
    var email = $("#text-input-splash").val();
    $.post("signup.php", { email: email }, function(data) {
      $("#validation-message").text(data).addClass("error-text");
    });
  });
});

表单输入键和按钮单击执行不同的操作

1 个答案: