PDA

View Full Version : how to access innerhtml element



luz
01-03-2007, 03:13 AM
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.



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

codeexploiter
01-03-2007, 11:17 AM
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.


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.

mburt
01-03-2007, 05:50 PM
For a <span> or <div> or pretty much any other tag which can have nested elements, can be accessed like this:


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

Twey
01-03-2007, 06:12 PM
document.forms[0].txtBox.valueYou mean
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:
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.

codeexploiter
01-04-2007, 03:30 AM
Correct Twey I didn't intend a detailed account there.

luz
01-10-2007, 03:56 AM
<!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>

vikasbhagwagar
01-10-2007, 01:24 PM
Use DOM techniques (createElement, appendChild etc) instead of innerHTML.