?
Solved

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

Posted on 2006-04-22
5
Medium Priority
?
454 Views
Last Modified: 2013-11-19
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
Comment
Question by:ysre
  • 3
5 Comments
 
LVL 4

Author Comment

by:ysre
ID: 16514202
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
 
LVL 25

Assisted Solution

by:clockwatcher
clockwatcher earned 200 total points
ID: 16514275
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
 
LVL 4

Author Comment

by:ysre
ID: 16514361
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
 
LVL 9

Accepted Solution

by:
smaccari earned 540 total points
ID: 16514459
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
 
LVL 4

Author Comment

by:ysre
ID: 16514637
Hmpf sometimes things can be so easy..
Funny it never showed up in the properties' listing for the element(s).

Thanks :)
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
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…
Suggested Courses

850 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