Solved

onSubmit Event while using document.form.submit()

Posted on 2004-10-11
17
4,781 Views
Last Modified: 2012-05-05
Hi Everybody!

I have a problem concerning the onSubmit event inside forms. when i have a submit button or image (<input type="submit"> or <input type="image">) the event is called. when i use a hyperlink (<a href="javascript:document.testform.submit()"...>) the form is being submitted, but the event is not called.

Working Code (reduced):

<form name="testform" method="POST" action="test.php" onsubmit="return chkForm();">
<input type="submit" value="abschicken">
</form>

not working code (reduced):

<form name="testform" method="POST" action="test.php" onsubmit="return chkForm();">
<a href="javascript:document.testform.submit();" >send</a>
</form>

Any Ideas how i can send the form with a hyperlink WITH onSubmit event being raised?

Any Help would be greatly appreciated.
Thx in advance.

Kind Regards.
Alex Hepp
0
Comment
Question by:heppa
  • 7
  • 5
  • 3
  • +2
17 Comments
 
LVL 13

Expert Comment

by:cLFlaVA
Comment Utility

Two methods to try:

<a href="document.testform.submit(); return false;" >send</a>

And:

<a href="#" onclick="document.testform.submit(); return false;" >send</a>
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 75 total points
Comment Utility
Like this:

<form name="testform" method="POST" action="test.php" onsubmit="return chkForm();">
<input type="submit" value="abschicken" name="Submit" style="display:none">
</form>
<a href="javascript:document.testform.Submit.click();" >send</a>


0
 
LVL 4

Author Comment

by:heppa
Comment Utility
Thank you for your efforts...

cLFlaVA, your versions don´t work either. The first one does nothing because of the return false; and the second one also submits the form, but the event onsubmit is not being raised.

Zvonko: Your approach does work, but is that really the only workaround to get this to work? I don´t really like such "hidden features" ;) but thank you very much. At least a workaround;) Will accept your answer later, after one or two days. Perhaps there is a more standardlike way...

Thank you!
0
 
LVL 13

Expert Comment

by:cLFlaVA
Comment Utility
Do take into account that Zvonko is at the top of the list in the JavaScript hall of fame, as well as being the featured JavaScript expert.  I think your answer lies in safe hands.
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Is this method more "standard"  to you:

<a href="#" onClick="f=document.testform;if(f.onsubmit())f.submit();return false;" >send</a>

0
 
LVL 4

Author Comment

by:heppa
Comment Utility
I know that, and i really appreciate it very much. Perhaps my comment was a bit lacking the respect, the workaround deserves. It´s great!!!
But nevertheless it is a workaround, and i think there´s a kind of bug in javascript. When i call the method submit, it should be the same as clicking a submit button. or am i wrong?

Kind Regards.
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
cLFlaVA, do you really believe I know everything?
This still experts Exchange where I do learn every day.
0
 
LVL 4

Author Comment

by:heppa
Comment Utility
At Zvonko:

;)

Nope, you´re right. I hope, you do not misunderstand my words... The thing about workaround is more going towards javascript then you... i excuse for my too short comment.

Kind regards.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
heppa, in my last hyperlink you see that there is a difference betwean forms onsubmit() event handler and forms submit() method.
0
 
LVL 13

Expert Comment

by:cLFlaVA
Comment Utility
all i was doing was expressing my confidence in the answer.  i do not really believe you know everything :)
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Sorry cLFlaVA, but I react to such compares because when I started in this topic area I was asked to be more respectful to "honored" experts comments. I was not too respectful, so I hope you are also not too respectful ;-)
0
 
LVL 4

Author Comment

by:heppa
Comment Utility
ok, i see. But in my eyes, calling the method submit(), i want the form to be submitted. And when the form is being submitted, the event onSubmit should be raised...

Perhaps only my special meaning, and totally off the green, but i know it now, and i know, that i can´t change javascripts behaviour, so i will accept it, and work with it.

Thank you very much for making that clear...

I did not only put confidence in the answer, i checked it out, but you must agree, that a hidden submit button, and a link, that simulates a click on this button, is a workaround, even when it is a really great one, that i would have never discovered.

Thanks
0
 
LVL 15

Expert Comment

by:Thogek
Comment Utility
heppa,
Did you try Zvonko's latter suggestion?  It takes into account the fact that [1] programmatic calls to a form's submit() method do bypass the onsubmit event (yes, this is normal and expected, although I don't know what the reasoning behind it is), and [2] you can generally call the form's onsubmit code yourself as though onsubmit were simply another method of the form object.
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
I think you see the solution, but only to go for sure, in the last hyperlink you do not need the hidden submit button.
Of course you are true, and also I have expected the onSubmit event to be fired when form is submitted.
But see it like this: when you have a form field with an onChange event is that event also not fired when field value is set by script.

That's the way how it works and we have to live with it.
0
 
LVL 3

Expert Comment

by:hemebond
Comment Utility
So, why exactly do you need to use a hyperlink?
0
 
LVL 4

Author Comment

by:heppa
Comment Utility
because design is hyperlink, not button, simple as that...

@Zvonko: You are right, we have to live with it. but i would say, that the onchange event should also be fired, when value is changed by script... nevertheless, i think, this is being discussed enough.

Thank you for your help
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
You are welcome.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now