如何防止表单提交非提交按钮？

Question

HTML:

<form id="form" action="/" method='post'>
<button>Button</button>
<input type="text">
<input type="submit" id="send-form" value="Send">
</form>

JS:

$('#form').submit(function() {
    console.log('send');
    return false;
});

为什么当我按下时Button,表单被提交(我需要这个元素进行另一个动作)？怎么预防这个？

Answer 1

默认操作<button>是提交按钮,但您可以通过执行以下操作使其成为"普通按钮":

<button type="button">Button</button>

有关详细信息,请参阅HTML规范.

Answer 2

尝试添加onclick监听器:

<button onclick="return false;">Button</button>

这应该阻止按钮提交表单.通过该技巧,点击操作被取消.