• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 482
  • Last Modified:

Finding an <input>'s <form>-parent via DOM?

Hi,

I'm just wondering..
How would you walk the DOM-tree in order to find the parent <FORM> element (eg. to submit() it) of any given <INPUT> element?

Example:
<form action="sth"> <!-- no name or id or class! -->
<input type="text" onClick="alert (find_parental_form_element(this))">
<input type="text" onClick="alert (find_parental_form_element(this))">
<input type="text" onClick="alert (find_parental_form_element(this))">
</form>

Walking via .parentNode only returns me styling - type elements (eg. in this order: DIV, TD, TR, TBODY, TABLE).

Ys
0
ysre
Asked:
ysre
  • 3
2 Solutions
 
ysreAuthor Commented:
Never mind, found a (kinda quirky) solution already.

I'm walking back via .parentNode until I find a node that has a childnode which has a nodeName of "FORM" ;)

Ys
0
 
clockwatcherCommented:
Wouldn't that have problems if you had this?

<p>

  <form>
   <input>
  </form>

  <form>
    <input>
   </form>

</p>


Rather than backtracking you could explicitly search for the element.

<html>
      <script language="javascript">
            function find_parental_form_element(el)
            {
                  for (var i=0; i < document.forms.length; i++)
                  {
                        var d = document.forms[i];
                        
                        for (var x=0; x < d.elements.length; x++)
                        {
                              if (d.elements[x] == el)
                              {
                                    // return d;
                                    return d.action;  // just to show we have the right form
                              }
                        }
                  }      
            }
            
      </script>
      
      <body>
      <form></form>
<form action="sth1"> <!-- no name or id or class! -->
<input type="text" onClick="alert (find_parental_form_element(this))">
<input type="text" onClick="alert (find_parental_form_element(this))">
<input type="text" onClick="alert (find_parental_form_element(this))">
</form>
<form action="sth2"> <!-- no name or id or class! -->
<input type="text" onClick="alert (find_parental_form_element(this))">
<input type="text" onClick="alert (find_parental_form_element(this))">
<input type="text" onClick="alert (find_parental_form_element(this))">
</form><form action="sth3"> <!-- no name or id or class! -->
<input type="text" onClick="alert (find_parental_form_element(this))">
<input type="text" onClick="alert (find_parental_form_element(this))">
<input type="text" onClick="alert (find_parental_form_element(this))">
</form>      
      </form>
      </body>
</html>
0
 
ysreAuthor Commented:
Hm yeah, I added some prerequisites (that's why I called it quirky).
Just wanted to find out if you can do it via the appraised ;) DOM 1 model.
Apparently you can't really.

Unless you use the old-style document.forms approach (or getElementsByTagName for firefox).

Thanks for the insight :)

0
 
smaccariCommented:
All inputs have a property named form that reference the form containing it.

<form>
<input type=text name=foo id=foo>
</form>

<script>
var myForm=document.getElementById("foo").form; //this will return the form element
</script>
0
 
ysreAuthor Commented:
Hmpf sometimes things can be so easy..
Funny it never showed up in the properties' listing for the element(s).

Thanks :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now