CODEWITHSUNDEEP
javascripthtml
novon
novon

Reputation: 993

Stopping form onSubmit without 'return false;'

I'm looking for a cross browser compatible way to stop a form submission without returning false.

For example:

<form action="..." onsubmit="someFunc(this);">
    ...
</form>

<script type="text/javascript">
    function someFunc(form){
        // do stuff to stop form submission without return false
    }
</script>

I've not found a good way to do this, anybody know if its possible?

Edit: I've tried both form.preventDefault() and window.event.preventDefault() in someFunc(). It seems like neither prevent the form from submitting in firefox (on a mac).

Solution

It seems like window.event is not available in FF, while it is in Chrome and IE.. thus my previous attempts not working. I solved this by having the first parameter of the function being called in the form's onsubmit to be the event itself. That can then be cancelled.

New form onsubmit looks like so: onsubmit="someFunc(event, this);"

Upvotes: 0

Views: 3895

Answers (2)

RobG
RobG

Reputation: 147413

Each event has an Event object associated with it. In the W3C event model, calling event.preventDefaut will prevent the default action from occuring. However, the only way in the W3C model to get a reference to the related event object is to pass it to the function from the associated listener. For an in–line listener:

<form onsubmit="someFunc(event)" ...>

If you attach the listener using addEventListener, then the related event object will be passed to the listener function as the first argument:

someElement.addEventListener('click', foo, false);

function foo(eventObject) {
  var target = eventObject.target;  // element on which the click occured
  var currentTarget = eventObject.currentTarget; // Element that called the listener
}

However, the listener in the OP is attached in–line and does not pass a reference to the event, so it can't be captured in browsers that only support the W3C model.

It the IE event model, the related event object is available as a property of the window object, so within the function you can do:

var event = window.event;

But the IE model doesn't support preventDefault, however does provide a returnValue property that, if set to false, cancels the default action.

So the most cross–browser way without using return false would be:

<form onsubmit="someFunc(event);" ...>

function someFunc(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}

However, it is very much simpler to use return false as it has been reliably supported by every browser since about NN/IE 2.

Upvotes: 1

Xanco
Xanco

Reputation: 902

You can use the event.preventDefault() function to stop of form from submitting. Here's an of a form being caught before being submitted in Javascript (with some JQuery):

$("form").submit(function(event) { // You can change "form" to whatever ID/class your form has
    event.preventDefault();
}

Done it! I've tested it in Firefox and this definitely works

Here's a link to the JSFiddle: http://jsfiddle.net/bZx3e/. Here's the HTML:

<form id="form"><input type="checkbox" id="checkbox"/><label for="checkbox">Checkbox</label>
<input type="button" onclick="check();" value="Submit"/></form>

And here's the Javascript:

function check(){
    if(document.getElementById("checkbox").checked){
        document.getElementById("form").submit();}
    else{}
}

So, basically, if the checkbox isn't checked, do nothing and if it is, submit the form. This way you could have all your validation before submitting the form.

Upvotes: 1

Related Questions