CODEWITHSUNDEEP
javascriptjqueryhtml
saranya
saranya

Reputation:

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

The reset action is performed by input type="image" and onclick calls a function called resetForm().

When reset is clicked the form submit should not happen. I tried returning false from resetForm() function and still it doesn't work. Please help me out.

Upvotes: 1

Views: 11269

Answers (6)

Roman
Roman

Reputation: 131

There is an actual way of doing it. But it requires a few steps.

  1. Define your ..
  2. You need bind the click even of the input item. use jquery to do it.
  3. write your function

binding:

 $(document).ready(function () {
   $("#yourinputtypeid").on("click", {Parameter1 : "your parameter value"},    
   FunctionNameToRun);
 }

the Function.

function FunctionNameToRun(event)
{
event.preventDefault();
// the rest of your code
}

That's it. This should prevent the submission / reloading of the page.

Upvotes: 1

KyleFarris
KyleFarris

Reputation: 17548

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.

Upvotes: 2

Joe
Joe

Reputation: 2437

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.

Upvotes: 1

Jordi
Jordi

Reputation: 5908

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.

Upvotes: 0

Jose Vega
Jose Vega

Reputation: 10258

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.

Upvotes: 2

moff
moff

Reputation: 6503

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.

Upvotes: 7

Related Questions