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

Question

我发现当我通过按Enter键提交表单时,页面刷新(因为我的表单没有指定操作),但如果我单击按钮,它将执行jQuery.

如何按Enter键同时执行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

要解决问题并改进逻辑,请将按钮更改为a 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");
    });
  });
});