View Full Version : Difference in calling javascript in href and onclick of anchor tag.

Vijay Venkat
01-18-2006, 05:39 AM

I am looking for a generic javascript function to identify the form with in which a element exists, thus developer can avoid coding like document.forms[index].submit() - where they are sure, they want the form with in which this element exists is to be submitted. This way when forms are introduced at top level the code can remain unchanged, else every form introduce above in the DOM will result in increasing the index by one.

The code is given below. While doing so i am stuck with 2 problems
P1: In the code, you can see i am giving a explicit 'break' in the code. If i don't do so the code seems to be looping. Obviously i am missing some basic.

P2: I am able to pass 'this' for anchor element by name="xy"
<a href="#" name="xy" onclick="javascript:doFormSubmit(this);">test</a>

in its onclick function by which, in the javascript function i move up the DOM.

While i am unable to do that on the anchor element given below since this function is now on the href attribute.
<a name="xy1" href="javascript:doFormSubmit(this);">Q test</a>
Hence the script fails.

Can someone point me in the right direction.

I know if i add a id attribute to the element, i can get the element and traverse the DOM. I am not interested in that solution.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="Javascript">
functionx doFormSubmit(childElement)
var parent = childElement.parentNode;
while(parent != null)
if (parent.method)
// Additional check needs to be done before calling submit.
// P1: Odd enough - this requires a break. Missing some basics here.
parent = parent.parentNode;



<form name="xyz" method="post" action="http://localhost:8080/context/index.html">
<div id="x">
<a href="#" name="xy" onclick="javascript:doFormSubmit(this);">test</a>
<!-- P2: -->
<a name="xy1" href="javascript:doFormSubmit(this);">Q test</a>


01-18-2006, 06:32 AM
If you use button (or any control for that matter), you can pass this.form to refer to the form the button exists in. In the case of anchor links, you can access the form by name - document.forms['formName'] - or by id - document.getElementById('formId') - instead of by index.

01-18-2006, 06:50 AM
But if you really want it to be generic without the need for the form name or id, you can do this.

<a href="#" onclick="submitForm(this);return false;">submit form</a>
function submitForm(elem){
while (elem.parentNode && elem.parentNode.tagName != "FORM"){
elem = elem.parentNode;
var oForm = elem.parentNode;
The this keyword can only be used in event handlers not on normal HTML attributes like href.

Vijay Venkat
01-18-2006, 09:14 AM
Thanks a lot for the explanation. It is clear. For knowing things better i would like to know, i am having to call break; explicity in my code (Case P1). I expected that the moment i said form.submit(); the control would have been transferred, but the execution still continues after the submission.


01-18-2006, 10:24 AM
You really need the break statement even if you call the submit method. But if you look at the code in my previous post, you can see that I called submit() outside the while loop.

01-18-2006, 10:39 AM
wouldn't be safer?:
while (elem.parentNode && elem.parentNode.tagName.toLowerCase() != "form"){

01-18-2006, 10:56 AM
I tested in IE6 and FF and both return uppercase. I assume other browsers do the same thing.

Checking W3C, I got this:

Note that this is case-preserving in XML, as are all of the operations of the DOM. The HTML DOM returns the tagName of an HTML element in the canonical uppercase form, regardless of the case in the source HTML document.

01-18-2006, 11:03 AM
yes, I know, yet somehow stubbornly I always use the toLowerCase() while checking tag names (elements nodeName) or attributes' nodeNames... Just in case... :D I might be much too cautious, I reckon... Or I try to use with XHTML...

01-18-2006, 11:27 AM
If you are really cautious, then just use String.match method and specify the 'i' flag. No extra method call.

while (elem.parentNode && elem.parentNode.tagName.match(/FORM/i))

01-18-2006, 11:29 AM
If you are really cautious, then just use String.match method and specify the 'i' flag. No extra method call.

while (elem.parentNode && elem.parentNode.tagName.match(/FORM/i))
yes, good ideea on using RegExp

Vijay Venkat
01-18-2006, 01:09 PM
glenngv and Kor,
Thanks for all the information. There was lot of learing from your responses.