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

Question

This is my form where i have action event when I click on button.

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

I have two button which I will display them depending on some condition say when button1 is displayed it will perform the form action and when button2 is displayed it will trigger javascript function which perform the different action and it should not trigger form action, but I my case both methods are triggering.

<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 below

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

            }
        });
    }

Please help me on this. Thanks in advance.

Answer 1

Change your second button type from submit to button This will prevent the submission of the form.

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

Answer 2

you can do it like this:

$('form').on('submit', function(e)
{
    e.preventDefault(); //this prevents default action

    //whatever else you want to do

    $('form').submit()
})

Answer 3

Change where you call your function, instead of calling it inline create an event listener and then you prevent default actions

$('input[name=SavePACS]').on('click', function(e) {
    e.preventDefault()

    // then do your code here
});

Answer 4

你应该做的按钮不类型的提交，以防止它们触发表单提交。