Form 'onsubmit' not getting called

Question

Here's the part of my form:

<form name='form-main' onsubmit='return validate()' action='' method='post'>
    <center><input type='submit' onClick='this.disabled=true; this.form.submit();' value='I accept - Download the GM!'/></center>
</form>

and here's the validate function:

function validate()
{
    // this is just to test if it actually shows
    alert('You must not leave any of the fields blank!');
    return false;
}

Whenever I hit the submit button, nothing happens, the page just reloads.. I would like it so it shows the alert dialog.

You should try to validate forms not on the client side, because a user can change the code easily. Also, check out jQuery, it has really nice form handling, and will make your job easier when you have larger and more complex inputs. [Here's](http://jqueryvalidation.org/) a link to a useful plugin. Good luck! — Carpetfizz, Nov 07 '13 at 21:43
Also note, is really old and you should use CSS instead. HTML is for content, CSS is for layout. — Paolo Celati, Jul 14 '16 at 15:43

score 29 · Accepted Answer · edited Mar 13 '19 at 16:55

29

When you call the form's submit function, the submit event is not fired. This is by design, the assumption is that if you're triggering the submission from code, you've already done any necessary validation. (Note that this is true of the HTMLFormElement#submit function; it is not necessarily true of the wrappers libraries put around it.)

In your example, I would remove the click handler on the button. It's a submit button, so just put any relevant logic in the submit event on the form. Alternately, if you prefer, call validate() as part of the button's click.

edited Mar 13 '19 at 16:55

mercator

28,290
8
63
72

answered Nov 07 '13 at 21:42

T.J. Crowder

1,031,962
187
1,923
1,875

Still not getting the dialog. This is my form now: `
`. And this is the button: ``. Also tried `return validate();`
– user1667191 Nov 07 '13 at 21:48
1

@user1667191: The `validate` function must be a global to be used with the old-fashioned DOM0 `onXYZ` attributes. If it is, that will work. Example: http://jsbin.com/ePUgAyo/1 [source](http://jsbin.com/ePUgAyo/1/edit). But again: Don't put this on the button. Put it on the form. That's the better place. (And you will need the `return` and if you want to prevent the form being submitted based on a condition, have `validate` return `false`.) – T.J. Crowder Nov 07 '13 at 21:50
1

@user1667191: Or better yet, use a modern event handler attached via `addEventListener` (or `attachEvent` on old versions of IE). – T.J. Crowder Nov 07 '13 at 21:54
Thanks a lot T.J! I had it inside and moved it inside and it works perfectly fine. – user1667191 Nov 07 '13 at 21:56

score 12 · Answer 2 · answered Nov 10 '15 at 09:05

12

You can override the original prototype "submit" method like this:

HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;

HTMLFormElement.prototype.submit = function (){ 
   this._submit(); 
   alert('Deddy Is Great :)'); // or fire the onsubmit event manually
};

answered Nov 10 '15 at 09:05

David Fischer

1,320
12
14

Your answer is very good and deserves to be up voted. I tried it and it worked without any issues. – Sunil Aug 10 '16 at 22:42

score 2 · Answer 3 · answered Nov 07 '13 at 21:57

The onclick event of your submit button is firing immediately before the onsubmit event of your form, and this is disabling subsequent events from propagating and firing, which causes the validate function to never get triggered. You can see this is you remove the this.disabled=true; from your code example.

Per the docs at W3:

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

You should remove the click event code from the submit button, and simply allow the function to do what you need it to do, including disabling the button. For example:

function validate() {
    // this is just to test if it actually shows
    document.getElementById('sub').disabled=true;
    alert('You must not leave any of the fields blank!');
    return false;
}

jsFiddle example

Thanks for the example, going to use this method to disable the button. — user1667191, Nov 07 '13 at 21:58

Form 'onsubmit' not getting called

3 Answers3

Linked

Related