asked on

Referring to form created by using innerHTML

Guys,

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?

ASKER CERTIFIED SOLUTION

KennyTM

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

NetExpert

ASKER

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.

NetExpert

ASKER

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]

KennyTM

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

NetExpert

ASKER

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>Comments</td></tr>
<tr><td valign='top'>
<div class='row2'><div class='written_by'>Written by Anonymous Reader on 2006-05-12 03:28:26</div></div>
</td></tr></table>

// 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
</SCRIPT>

<TABLE width='100%' CELLPADDING='2' CELLSPACING='3' BORDER='0'>
<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'>

<TR><TD>Name:</TD><TD>
<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>
            </div>

NetExpert

ASKER

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