javascript - HTML按钮不提交表单(HTML button to NOT submit form)

Question

I have a form.

(我有一个表格。)

Outside that form, I have a button.

(在该表格之外，我有一个按钮。)

A simple button, like this:

(一个简单的按钮，如下所示：)

<button>My Button</button>

Nevertheless, when I click it, it submits the form.

(不过，当我单击它时，它将提交表单。)

Here's the code:

(这是代码：)

<form id="myform">
    <input />
</form>
<button>My Button</button>

All this button should do is some JavaScript.

(该按钮应该做的就是编写一些JavaScript。)

But even when it looks just like in the code above, it submits the form.

(但是，即使看起来像上面的代码一样，它也会提交表单。)

When I change the tag button to span, it works perfectly.

(当我将标签按钮更改为跨度时，它可以正常工作。)

But unfortunately, it needs to be a button.

(但不幸的是，它必须是一个按钮。)

Is there any way to block that button from submitting the form?

(有什么方法可以阻止该按钮提交表单？)

Like eg

(像例如)

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

  ask by arik translate from so

Answer 1

I think this is the most annoying little peculiarity of HTML... That button needs to be of type "button" in order to not submit.

(我认为这是HTML最令人讨厌的小特性...该按钮必须为“按钮”类型才能不提交。)

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

Update 5-Feb-2019: As per the HTML Living Standard (and also HTML 5 specification ):

(更新2019年2月5日：根据HTML生活标准 （以及HTML 5规范 ）：)

The missing value default and invalid value default are the Submit Button state.

(缺少的默认值和无效的默认值是“提交按钮”状态。)