Results 1 to 7 of 7

Thread: how to access innerhtml element

  1. #1
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default how to access innerhtml element

    Hi guys...i'm kinda new in this js language...i was wondering can anybody help me with this code....well problem maybe sound a bit silly..well I was wondering how to get the all the value from the txtbox so that,I can validate all the data that have been key in by the user....thanking u all in advance for your time in reviewing my msg...may god bless u all.

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script language="javascript">
    var numLinesAdded = 0;
    function generateRow() {
    var d=document.getElementById("div");
    var addbut=document.getElementById("addsub");
    
    d.innerHTML+="<table width='90%' bgcolor='#E9E9E9' border='0' cellpadding='0' cellspacing='0'><tr class='ContentTableText'><td>Name</td><td><input name='ConNameMs[]' type='text' id='ConNameMs[]' class='ContentTableText' size='38' /></td></tr><tr class='ContentTableText'><td>Address</td><td><input name='ConAdd[]' type='text' id='ConAdd[]' class='ContentTableText' size='38' /></td></tr><tr class='ContentTableText'><td>Age</td><td><input name='ConAge[]' type='text' id='ConAge[]' class='ContentTableText' size='38' /></td></tr></table><br>";
    //d.innerHTML+="<input type='text' maxlength='5' name='txt1_" + numLinesAdded + "' onkeypress='focusNext(this)'>";
    numLinesAdded++;
    if(numLinesAdded=="5"){
    addbut.disabled = true;
    }
    }
    function test(){
    alert("hi");
    var thediv=document.getElementById("div");
    var theelementcon=thediv.getElementsByTagName("input");
    for(i=0;i<theelementcon.length;i++){
    theelementcon[i].innerHTML=document.getElementById("ConNameMs[]").value;
    }
    }
    </script>
    </head>
    
    <body>
    <div id="div" align="center"></div>
    <input type="button" value="Add Contact" id="addsub" onclick="generateRow()" class="ContentTableText"/>
    <input type="button" value="Test" id="test" onclick="test()" class="ContentTableText"/>
    </body>
    </html>

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    well I was wondering how to get the all the value from the txtbox so that,I can validate all the data that have been key in by the user.
    If you want to access the value stored in a textbox then you can use the following method.

    Code:
    document.forms[0].txtBox.value
    will give you the value stored in a text box whose name is txtBox which is inside the first form element in the web page.

    The index of the forms[] depends on how many forms you use in your web page. If your needed element is in your first form element then it would be forms[0] if it is in the fourth form element then it would be forms[3]. The index starts from 0.

  3. #3
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    For a <span> or <div> or pretty much any other tag which can have nested elements, can be accessed like this:

    Code:
    document.getElementById("theTagId").innerHTML = "The stuff between the tags. <br>More stuff"
    - Mike

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    document.forms[0].txtBox.value
    You mean
    Code:
    document.forms[0].elements['txtBox'].value
    The index of the forms[] depends on how many forms you use in your web page. If your needed element is in your first form element then it would be forms[0] if it is in the fourth form element then it would be forms[3]. The index starts from 0.
    It's also possible to access the form by name or ID:
    Code:
    document.forms['formNameOrID'].elements['elementName'].value
    For a <span> or <div> or pretty much any other tag which can have nested elements, can be accessed like this:
    Can be, but shouldn't be if it can possibly be done with standard DOM methods.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Correct Twey I didn't intend a detailed account there.

  6. #6
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I found the solution

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script language="javascript">
    var numLinesAdded = 0;
    function generateRow() {
    var d=document.getElementById("div");
    var addbut=document.getElementById("addsub");
    
    d.innerHTML+="<table width='90%' bgcolor='#E9E9E9' border='0' cellpadding='0' cellspacing='0'><tr class='ContentTableText'><td>Name</td><td><input name='ConNameMs[]' type='text' id='ConNameMs[]' class='ContentTableText' size='38' /></td></tr><tr class='ContentTableText'><td>Address</td><td><input name='ConAdd[]' type='text' id='ConAdd[]' class='ContentTableText' size='38' /></td></tr><tr class='ContentTableText'><td>Age</td><td><input name='ConAge[]' type='text' id='ConAge[]' class='ContentTableText' size='38' /></td></tr></table><br>";
    //d.innerHTML+="<input type='text' maxlength='5' name='txt1_" + numLinesAdded + "' onkeypress='focusNext(this)'>";
    numLinesAdded++;
    if(numLinesAdded=="5"){
    addbut.disabled = true;
    }
    }
    function test(){
    var whats=document.getElementsByName("ConAge[]");
    var thespecificelement=whats;
    for(i=0;i<thespecificelement.length;i++){
    var x=thespecificelement[i].value; alert(x);
    	}
    }
    </script>
    </head>
    
    <body>
    <div id="div" align="center"></div>
    <input type="button" value="Add Contact" id="addsub" onclick="generateRow()" class="ContentTableText"/>
    <input type="button" value="Test" id="test" onclick="test()" class="ContentTableText"/>
    </body>
    </html>

  7. #7
    Join Date
    Aug 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Use DOM techniques (createElement, appendChild etc) instead of innerHTML.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •