Vijay Venkat
01-18-2006, 05:39 AM
Hi
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">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="Javascript">
functionx doFormSubmit(childElement)
{
var parent = childElement.parentNode;
while(parent != null)
{
alert(parent.name);
if (parent.method)
{
// Additional check needs to be done before calling submit.
parent.submit();
// P1: Odd enough - this requires a break. Missing some basics here.
break;
}
else
{
parent = parent.parentNode;
}
}
}
</script>
</HEAD>
<BODY>
<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>
</div>
</form>
</BODY>
</HTML>
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">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="Javascript">
functionx doFormSubmit(childElement)
{
var parent = childElement.parentNode;
while(parent != null)
{
alert(parent.name);
if (parent.method)
{
// Additional check needs to be done before calling submit.
parent.submit();
// P1: Odd enough - this requires a break. Missing some basics here.
break;
}
else
{
parent = parent.parentNode;
}
}
}
</script>
</HEAD>
<BODY>
<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>
</div>
</form>
</BODY>
</HTML>