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

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代码.

我怎样才能防止这种情况发生？

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

<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>

Answer 1

为了防止表单提交<button>,您需要指定type="button".

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

如果您没有指定type,则默认为type="submit",当您按Enter键时将提交表单.