I think I’ve actually read this before, but I had forgotten it (for which I paid 30-45 minutes of debugging hell - why won’t you work? Stoopid JavaScript!).
If you are submitting a form using JavaScript (document.formName.submit(); ), with an onclick event, the onsubmit handler on the form (say a validation script) does not fire. You need to call the script you want to run onsubmit in the onclick event.
<script language="JavaScript">
function validate() {
return true;
}
</script>
<form name="foo"
action="index.php"
method="post"
onsubmit=" if (!validate()) { alert(’whoops!’); return false; }">
<input type="text" name="bar" />
<span onclick="if (!validate()) { alert(’whoops!’); return false; }
else { document.foo.submit(); }">
Submit
</span>
</form>Popularity: 30% [?]
ben adds this Comment:
AH HAH! Finally. Why the hell is this? Stoopid javaScript.
March 5th, 2004 at 11:10 am
smash adds this Comment:
on_() scripts are intended to fire when a *user* triggers an event, not a script. It’s a little cleaner this way, because you don’t have to worry about weird side effects when you’re messing with stuff on the page via javascript.
With things this this way you can pull tricks like having a form’s onSubmit handler do a form.submit on itself without getting into an infinite loop.
April 26th, 2004 at 7:35 pm
Mike Schell adds this Comment:
Lucky for me, this blog post came up #6 in Google for the single keyword ‘onSubmit’. Thanks and good work, Alex! May I one day have the organizational fortitude to blog as I debug.
August 29th, 2005 at 9:24 am
Danny adds this Comment:
So what if you have a complicated form that has multiple items that cause post back using asp.net? It is a royal pain in the neck to have to use attachEvent to every item that can cause post back. Boy this is frustrating.
October 6th, 2005 at 2:08 pm
Winston Murdock adds this Comment:
Thanks. I’ve been trying to work on an onsubmit handler for a page where the submit button is an with an onclick action. I wish there were a way around this, but it’s good to know that this is built-in behavior and not something specific I was doing wrong.
October 19th, 2005 at 10:19 am
Guillermo Rauch adds this Comment:
Alex, I don’t think this is the cleanest of ways to work this problem out.
It’s been said here that events are designed to work with user interaction. That’s true, but they’re functions, and you can call them to check if the form validates.
So once you have your onsumit event defined, you can simply do this:
Click to submit
I tested this in Firefox 1.5 and Internet Explorer 6
Note:
The $ function is a shortcut to document.getElementById, provided by prototype. You can change it if you’re not working with that library.
January 5th, 2006 at 8:24 am
mediaFetish » Blog Archive » Cross browser/platform form validation adds this Pingback:
[…] alexking.org: Blog > Alex King: JavaScript onSubmit Handler […]
March 13th, 2006 at 10:30 am
Laura adds this Comment:
Ah-HA! This was what was tripping me up all afternoon…Thank you so much for this, it’s been really useful
May 31st, 2006 at 3:04 pm
Roderick Smith adds this Comment:
GREAT ARTICLE, saved me a lot of time… thank you dude
September 7th, 2006 at 1:36 pm
OrbZ adds this Comment:
Thank you! It helped me a lot… i was starting to have a headache! ^_^
December 10th, 2006 at 8:03 pm
Ed adds this Comment:
Since upgrading to IE7, my js validations weren’t working. This article helped me fix it.
I put the validation on the onclick event of the submit button, rather than using onsubmit in the form tag.
December 19th, 2006 at 9:54 pm
Mario adds this Comment:
?常?興味深?場所! ??多???有益?情報を見???
March 24th, 2007 at 10:53 am
Joseph adds this Comment:
Gee, thanks. Just when I needed it most. I will also try to find some other work around and I will share it as soon as I find one. Thanks. Hehe
June 11th, 2007 at 10:57 am
Benjamin Kamp adds this Comment:
Anybody else feel like they are having a one sided conversation with Javascript? Could it just talk back a little… “oh, you were sorta close that time, keep trying buddy!”… Thanks for pointing me in the right direction on this one!
July 29th, 2007 at 4:26 am
Jere adds this Comment:
ok, one more time…
Sorry.
<span onclick=”document.foo.onsubmit();”>
December 2nd, 2007 at 4:47 pm
Glenn adds this Comment:
Thanks, Alex.
Other people gave solutions to this problem that didn’t work.
Change the “Submit” button to a “Text” button, and make the validation do the submit. Brilliant. It’s the only thing that worked for me.
January 30th, 2008 at 5:21 pm
JD adds this Comment:
Alex, just wanted to say thanks for the post, it was exactly what I needed.
April 24th, 2008 at 7:37 am
Pete adds this Comment:
After banging my head against the wall for an hour I found your most helpful post! Now I’m a happy chappy again
THANKS!!!
June 26th, 2008 at 6:09 pm