CODEWITHSUNDEEP
javascripthtmldom-events
Ian McIntyre Silber
Ian McIntyre Silber

Reputation: 5663

Stop form submission with submit eventlistener

I'm trying to stop a form from submitting using the submit eventlistener. My anonymous function runs but the form still submits, even with return false at the end of the function. There are no JS errors being thrown.

Am I making some stupid mistake?

<form id="highlight">
    Row: <input type="text" name="rows" value="1" id="rows">
    Column: <input type="text" name="cells" value="1" id="cells">
    <input type="submit" name="Submit" value="Highlight" id="Submit">
</form>

<script>
var highlight_form = document.getElementById('highlight');
highlight_form.addEventListener('submit', function() {
        alert('hi');
    return false;
}, false);
</script>

Upvotes: 5

Views: 18095

Answers (3)

kuroi neko
kuroi neko

Reputation: 8661

Well this is the way I would do it :

function validate (form)
{
    // return false if some fields are not right
}

function setup_form_validation (form)
{
    form.addEventListener (
        'submit',
        function (f) { // closure to pass the form to event handler
            return function (evt) {
                if (!validate (f)) evt.preventDefault();
                // Return status doesn't work consistently across browsers,
                // and since the default submit event will not be called in case
                // of validation failure, what we return does not matter anyway.
                // Better return true or nothing in case you want to chain other
                // handlers to the submit event (why you would want do that is
                // another question)
            };
        } (form),
    false);
}

I would rather have a boolean holding the form validation status, though. Better update the status each time a field changes than do the check only when the user tries to submit the whole form.

And of course this will fail in IE8- and other older browsers. You would need yet another bloody event abstraction layer to make it work everywhere.

Upvotes: 0

Kyle
Kyle

Reputation: 4238

To prevent form submission, I've always used the "onclick" event to call a javascript method which will do something and then submit from there. You can also setup the form as follows:

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Once submitted, the validateForm() method can prevent submission if necessary:

function validateForm()
{
var x=document.forms["myForm"]["fname"].value
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

Upvotes: 1

Jim Rubenstein
Jim Rubenstein

Reputation: 6920

I always call event.preventDefault() on event listeners that I want to cancel the event for, as well as return false. This always works for me.

<script>
var highlight_form = document.getElementById('highlight');

highlight_form.addEventListener('submit', function(event)
{
    event.preventDefault();
    alert('hi');
    return false;

}, false);
</script>

Upvotes: 10

Related Questions