'How to prevent that a JQuery button submit my form?

I am absolutly new in JQuery development and I have the following problem.

I have a form that contains this JQuery button:

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

Clicking this button the user reset to null two input that are into my form performing this JavaScript function:

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

The script is performed but the problem is that after that it go out from the previous function the form is submitted anyway and I don't want that this behavior happen.

How can I prevent that the form is submitted when the user click on the reset button? As you can see I also try to add this statment but it don't work:

event.preventDefault();

What am I missing? How can I fix this issue?

Another question is: is it the correct way to reset the values of the input tag of my form?

javascripthtmljqueryformsjquery-events


Solution 1:[1]

Try this

var form = $('#dataDaAForm')

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

Solution 2:[2]

Give this a shot - you need to pass the event into the function. In addition, I've removed the need for inline JS.

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

In addition to preventing the default, Javascript provides a method to reset your form:

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

Note: You tagged jquery, so I provided a jquery solution (although there is no jquery in your question).

Solution 3:[3]

The simplest way to create a reset button is an input type reset:

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

Though if you really want to do it in javascript, the answer of James Hill will suffice

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 devqon

Related Questions