Referring to form created by using innerHTML


Here's the situation. I have a hidden iframe, it load the url from a location. That file when loaded will call a function to copy the content of that page to a div (using document.getElementById('divID').innerHTML = window.frame.document.body.innerHTML).

So, when the iframe load a page that include a form, how can I refer to the form that is inserted into the div?
Who is Participating?
Use "document.getElementById('divID').childNodes" to get a collection childs of the <div>... Then loop over this collection and check the element which have the "tagName" "form".

Or use document.forms[x].
NetExpertAuthor Commented:
I cannot access the form via document.forms[x]. It returns a form with correct name and action, but contain no form element, and somehow I'm confused between the form in the iframe and the form in the document itself ( I can access the form in the iframe easily, but since the iframe is hidden so it's no use then).

Will try the childNodes access now, but any further suggestion will be very helpful. Thanks.
NetExpertAuthor Commented:
Nope, the childNodes only refer to immediate child Node of the div, while the form is nested further down the tree, and using loop to identify and access the right branch is quite a messy work, so I'd have to settle down with other solutions.

I was wondering why I have a form with no element when using document.forms[x]
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.

I see. Can you put here an example of the content of that <iframe>? (i.e., what would "window.frame.document.body.innerHTML" be like typically?)
NetExpertAuthor Commented:
I tried to clean up as much as possible.

<div style='margin:5px;'>                  

// Some junk data
<table><tr><td valign="top" colspan="2">
<div style="text-align: center;">SAMPLE TEXT
<div style='width:100%;border-top:1px solid #AAA;margin-top:10px;'>

// Comment data
<table width='80%' border='0' cellspacing='1' cellpadding='1'>
<tr><td valign='top'>
<div class='row2'><div class='written_by'>Written by Anonymous Reader on 2006-05-12 03:28:26</div></div>

// sDiv() will show the hidden form
<div style='cursor:pointer;' onclick="sDiv('commentform',1);">Leave a comment</div>

<div id='commentform' style='display:none;width:70%;border:1px solid #AAA;margin-left:20px;'>
<script language="Javascript">
// script used for validate form data

        <FORM NAME='commentform' ACTION='index2.php' METHOD='POST'>
        <INPUT TYPE='hidden' NAME='option' value='comment'>
        <INPUT TYPE='hidden' NAME='itemid' value='xxx'>
        <INPUT TYPE='hidden' NAME='contentid' value='xxx'>
        <INPUT TYPE='hidden' NAME='func' value='entry'>

<INPUT TYPE='text' NAME='acname' size='60' maxlength='60' value='Anonymous'>
<input type='hidden' name='ut' value=0></TD></TR>

<TR><TD>Title:</TD><TD><INPUT TYPE='text' NAME='title' size='60' maxlength='60'></TD></TR>

<TR><TD>BBCode:</TD><TD><A href='javascript: x();' onClick='DoPrompt("url");'>Junk data</TD>

<TD valign='top'><TEXTAREA cols='45' ROWS='8' NAME='comment'></TEXTAREA></TD></TR><TR><TD> </TD><TD align='left'><div class='button' onClick='validate()'>Send</div></TD></TR></FORM>

</TABLE></div></div><br /></p></div></div></td>            
NetExpertAuthor Commented:
The problem is, most of the content of the site will be buffered and displayed this way, the comment form is only one of them. So if I keep going with bufferring the new content into an iframe and copy into the div, some other forms won't work. I will have to rewrite the validate function for most of them, not to mention any other issues since I can't access any element copied into the div.

Time is also a constraint here, I am planning to seperate any interactive content (form?) into another frame. Unless you find a good solution, I will close the question and award the point. Using node is the best way to access the element I wanted, but it just doesn't work because my script is too complex.

Thanks for the childNodes suggestion. I learn something new :)
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.

All Courses

From novice to tech pro — start learning today.