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

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?
  • 4
  • 2
1 Solution
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]
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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 :)

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

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