Stopping form submit during onlick of an input type="image"

Question

The reset action is performed by input type="image" and onclick calls a function called resetForm(). When reset is clicked the form submit shouldnt happen.Tried returnin false from resetForm() function and still it doesnt work. Please help me out..

Answer 1

Instead of returning false in resetForm, use preventDefault in the click function:

$('#myButton').click(function(event) {
    event.preventDefault(); // yaa!
    resetForm();
});

return false does also work, but when jQuery got a function for something, I usually stick with that.

Answer 2

I will make sure that your function is properly returning false, make sure you have no syntax error in your JavaScript.

Good way to test this, try alert("Testing Return!"); right before return false.

Answer 3

If you would like to use return False; as opposed to event.preventDefault();, you must put the return false within the event callback. So, it would need to be like this if you are returning false in resetForm():

$('#myButton').click(function() {
    return resetForm();
});

Even simpler, if all you are doing is running a function on click (thanks to JimmyP for that reminder):

 $('#myButton').click(resetForm);

In my opinion, it's cleaner, simpler, and involves less typing. All wins for me.

Answer 4

I would probably be better to use <input type="reset" /> rather than type="image", because the latter has the semantics of type="submit" and the former seems to have the semantics that you're going for. You could also easily put an image on such a button as well and it would probably save you the trouble of having to write a JavaScript function.

If you want to continue using <input type="image" />, I don't think returning false from the onclick event will do anything. Since it has the semantics of submitting the form, the form will just be submitted. In order to counter that, you could maybe place an onsubmit attribute in the form tag: <form onsubmit="return submitFunction();" />. In the submitFunction you could then check which submit/image button was pressed and depending on that return true or false. Returning false here will prevent the form from submitting.

Answer 5

I think everyone else is describing a different way to do what I am suggesting which is:

onClick="return resetForm();"

Otherwise the onClick is calling without caring the return.