javascript - 如何防止触发表单提交操作？

Question

这是我的表单，当我点击按钮时我有 Action 事件。

<form id="prefForm4" enctype="multipart/form-data" method="post" class="masters"
    action="/Preferences/Preferences/RISSave">
</form>

我有两个按钮，我将根据某些条件显示它们，比如当显示 button1 时它将执行表单操作，当显示 button2 时它将触发执行不同操作的 javascript 函数并且它不应该触发表单操作，但我的情况是这两种方法都在触发。

<input id="button1" name="Save" class="button" type="submit" value="<%="Save".Localize()%>"/>

<input id="button2" name="Save" class="button" type="submit" value="<%="Save".Localize()%>"
                        onclick="saveData();" />

下面是 JavaScript

function saveData() {
        $.ajax({
            url: "/Preferences/Preferences/saveData",
            type: "POST",
            data: items,
            success: function (reponse) {
                return true;
            },
            error: function (reponse) {

            }
        });
    }

请帮我解决这个问题。提前致谢。

Answer 1

将您的第二个按钮类型从 submit 更改为 button 这将阻止提交表单。

<input id="button2" name="SavePACS" class="button" type="button" value="<%="SavePACS".Localize()%>"
                    onclick="saveData();" />