PDA

View Full Version : creating multiple text input fields with a loop, then accessing the values later

wallacer
07-08-2005, 08:49 PM
I'm trying to get code that will create a user specified number of text input boxes on the screen, and then be able to access them individually. I have tried a few approaches and can't get one to work. Here's what I tried:
function getRounds()
{ totalRounds = prompt ('How Many rounds in total?',"")
for (i = 1; i <= totalRounds; i++){
document.write("<input type='text' name = 'round"+i+"' style = 'width: 100'>Round"+i+" ")
}
}

Then in another function i call:
document.write(": "+document. roundlevels.round1.value)
//I really want to call roundlevels.currentRound.value is there a way to go to a deeper level like roundlevels.round(valueofcurrentRound).value?


the html is:
<form name = "roundlevels" onsubmit="0">
<script>getRounds()</script>
<script>displaycurrentRound()</script>//the other function </form>


Any Help on this problem would be greatly appreciated, thanks in advance,

Wallacer
vwphillips
07-09-2005, 08:16 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (09-07-2005) http://www.vicsjavascripts.org.uk

var RoundAry=new Array();

function getRounds(){
totalRounds = prompt ('How Many rounds in total?',"")
if (isNaN(totalRounds)){ alert('only numbers allowed'); return; }
for (i = 1; i <= totalRounds; i++){
RoundAry[RoundAry.length]=document.createElement('INPUT');
RoundAry[RoundAry.length-1].id='Round'+(RoundAry.length);
document.getElementById('MyRounds').appendChild(RoundAry[RoundAry.length-1]);
RoundAry[RoundAry.length-1].style.width='100px';
txt=document.createTextNode(' Round '+RoundAry.length);
document.getElementById('MyRounds').appendChild(txt);
br=document.createElement('BR');
document.getElementById('MyRounds').appendChild(br);
dis=document.createElement('DIV');
dis.appendChild(document.createTextNode(' '));
document.getElementById('MyRoundsDisp').appendChild(dis);
}
}


function ShowValues(){
dis=document.getElementById('MyRoundsDisp').getElementsByTagName('DIV');
for (i=0;i<dis.length;i++){
dis[i].firstChild.data='Round '+(i+1)+' = '+RoundAry[i].value;
}
}

//-->
</script>

<input type="button" name="" value="Make Rounds" onclick="getRounds();" >
<input type="button" name="" value="Values" onclick="ShowValues();" >
<div id="MyRounds" ></div>
<div id="MyRoundsDisp" style="width:100px;" ></div>

</body>

</html>