Question

我有一个带有几个文本框的表单和几个按钮。我正在处理一些自定义表单元素。其中一个是一个文本框，它将搜索onEnterClicked上的数据库。这工作正常，但我也有一个按钮，将运行代码onClick。这两个似乎都与提交表单有关。

<form onsubmit="return false;">
    <input type="text" id="autofill">
    ...
    <button id="upload">

当我运行这个jQuery代码时：

$("input#autofill").keyUp(function(e){
    //Do stuff
});

$("button#upload").click(function(){
    alert("test");
});

在自动填充文本框中按Enter键将显示测试提醒，但不会执行任何//do stuff代码。

如何防止这种情况发生？

＆＃13;

$(function(){
  
  $("#autofill").keyup(function(e){
    
    if(e.keyCode == 13)
    alert("Enter pressed");
    
    });
  
  $("#upload").click(function(){
    
    alert("Button clicked");
    
    });
  
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form onsubmit="return false;">
  <input type="text" id="autofill"/>
  <button id="upload">Click me to show an alert</button>
</form>

＆＃13;

Answer 1

为了防止使用<button>提交表单，您需要指定type="button"。

<button id="upload" type="button">Click me to show an alert</button>

如果您未指定type，则默认为type="submit"，当您按Enter键时将提交表单。

Answer 2

如果您有充分的理由使用按钮类型＆＃39;提交＆＃39;，请尝试此解决方案。抓住＆＃39;按键＆＃39;文本框的事件并禁止它

＆＃13;

$(function() {

  // handle the 'keypress' event to prevent the form submission
  $('#autofill').keypress(function(e) {

    if (e.keyCode == 13) {
      e.preventDefault();
      e.stopPropagation();
    }

  });

  $("#autofill").keyup(function(e) {

    if (e.keyCode == 13)
      alert("Enter pressed");

  });

  $("#upload").click(function() {

    alert("Button clicked");

  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="f">
  <input type="text" id="autofill" />
  <button id="upload">Click me to show an alert</button>
</form>

＆＃13;

通过触发按钮阻止表单提交

2 个答案: