表单上有2个按钮，只有1个带有提交类型，但都触发提交事件

2 buttons on form only 1 with submit type but both triggers submit event

本文关键字：提交 类型 事件 1个 2个 按钮 只有 表单      更新时间：2023-09-26

不使用jQuery，只是简单的javascript与DOM。表单上有两个按钮，一个没有类型，一个有type="submit"

下面是我的问题的一个例子:

https://plnkr.co/edit/wAlpawx2wJUZ9FXWXL9h?p =

预览
         <div>
            <button class="add">add</button>
        </div>
        <div>
            <button type="submit">submit</button>
        </div>

两个按钮都触发提交事件。我如何得到只有按钮与type="submit"来触发提交事件?

另外，我如何持久化表单数据，以便在触发提交时结果可以留在"pre"标记中?

表单中button的默认类型为submit。如果你想阻止它触发表单提交，你需要设置type="button"。

设置type属性为"button"或手动取消事件

<button type='button' class='add'>add</button>

或者

$('button.add').click(function(e){
    e.preventDefault(); // cancel default behavior
    // my add logic
});

你只需要改变你不想用"button"提交的按钮类型。我知道这感觉很奇怪，但是按钮标签的默认类型是"提交"。

<button type="button">Add</button>

按规格:

默认缺失值是Submit Button状态。

如果type属性处于Submit Button状态，则该元素是一个特定的提交按钮。

W3C文档

相关文章：