如何防止 JQuery 按钮提交我的表单？

Question

我是 JQuery 开发的新手，遇到以下问题。

我有一个包含这个 JQuery 按钮的表单：

<!-- RESET BUTTON: -->
<td>
    <button class="resetButton" name="submitReset" onclick="return resetSearch(); return false;">Reset</button>
</td>

单击此按钮，用户将在我的表单中执行此 JavaScript 功能重置为 null 2 输入：

function resetSearch() {
    var f = document.getElementById('dataDaAForm');
    f.dataDa.value = null;
    f.dataA.value = null;
    event.preventDefault();
}

脚本已执行，但问题是它从上一个函数中退出，无论如何都会提交表单，我不希望这种行为发生。

当用户点击重置按钮时，如何防止表单被提交？如您所见，我也尝试添加此语句，但它不起作用：

event.preventDefault();

我错过了什么？我该如何解决这个问题？

另一个问题是：重置表单输入标签的值是否正确？

Tnx

Answer 1

试一试——您需要将事件传递给函数。此外，我已经消除了对内联 JS 的需求。

$(".resetButton").click(function(e) {
    var f = document.getElementById('dataDaAForm');
    f.dataDa.value = null;
    f.dataA.value = null;
    e.preventDefault();
});

除了防止默认，Javascript 还提供了一种重置表单的方法：

$(".resetButton").click(function(e) {
    document.getElementById("dataDaAForm").reset();
    e.preventDefault();
});

注意：你标记了 jquery，所以我提供了一个 jquery 解决方案（尽管你的问题中没有 jquery）。

Answer 2

创建重置按钮的最简单方法是输入类型重置：

<input type="reset" value="Reset" />

虽然如果你真的想用 javascript 来做，James Hill 的回答就足够了

Answer 3

试试这个

var form = $('#dataDaAForm')

$(".resetButton").on("click",function(e) {
    form.reset()
    e.preventDefault()
    e.stopPropagation()
})