Referring to form created by using innerHTML

Posted on 2006-05-11
Last Modified: 2010-04-06

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?
Question by:NetExpert
    LVL 8

    Accepted 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].
    LVL 7

    Author Comment

    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.
    LVL 7

    Author Comment

    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]
    LVL 8

    Expert Comment

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

    Author Comment

    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

    <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'>

    <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>            
    LVL 7

    Author Comment

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
    JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
    Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now