HELP! Autofilling table/fieldset with data from array

apowers20

07-07-2005, 12:34 AM

Hi All,

JavaScript noob here :)

What I'm trying to do is I'm sure simple:

When a user selects a radio button a table is created with data that is displayed on the same page as the rest of the website content.

What I have written to do this is:

function fourUp ()
{
var four_up = new Array (12)

four_up[0] = 4;
four_up[1] = 8;
four_up[2] = 12;
four_up[3] = 16;
four_up[4] = 20;
four_up[5] = 24;
four_up[6] = 32;
four_up[7] = 40;
four_up[8] = 60;
four_up[9] = 80;
four_up[10] = 100;
four_up[11] = 120;

this.document.write ("<fieldset> <legend>Number of Pads Ordered:</legend>");
for (i=0; i<12; i++)
{
this.document.write ("<input type=radio name=quantity value=i>"+ four_up[i] +"     &nbsp");
}
this.document.write ("<br>");
this.document.write ("<input type=radio name=quantity value=other ><span class=stdfnt>Other <input class=TEXT type=text name=quantityo size=5 max_length=5 value=></span>");
this.document.write ("</fieldset>");
}

What happens is: A new page is created with my data being loaded into the fieldset, but I want it to be loaded on the current page and in a placement of my liking. Is there any way to do this?

I would really appreciate any insight or maybe other suggestions on how to do this. Thank you all.

Kor

07-07-2005, 09:42 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var four_up =[4,8,12,16,20,24,32,40,60,80,100,120];
function ele(e){
this.obj = document.createElement(e);
return this.obj;
}
function txt(t){
this.obj = document.createTextNode(t);
return this.obj;
}
function att(obj,a,v){
for(var i=0;i<a.length;i++){obj.setAttribute(a[i],v[i])}
return
}
function fourUp(){
var oFie = ele('fieldset');
var oLeg = ele('legend');
oLeg.appendChild(txt('Number of Pads Ordered:'));
oFie.appendChild(oLeg);
for(var i=0;i<four_up.length;i++){
var oRad1=ele('input');
att(oRad1,['type','name','value'],['radio','quantity',i]);
oFie.appendChild(oRad1);
oFie.appendChild(txt(four_up[i]+'\u00A0'+'\u00A0'+'\u00A0'+'\u00A0'+'\u00A0'+'\u00A0'));
}
oFie.appendChild(ele('br'));
var oRad2 = ele('input');
att(oRad2,['type','name','value'],['radio','quantity','other']);
oFie.appendChild(oRad2);
var oSpa = ele('span'); oSpa.className='stdfnt';
oSpa.appendChild(txt('Other'+'\u00A0'));
var oRad3 = ele('input'); oRad3.className='TEXT';
att(oRad3,['type','name','value','size','maxLength'],['text','quantityo','','5','5'])
oSpa.appendChild(oRad3); oFie.appendChild(oSpa)
document.getElementsByTagName('body')[0].appendChild(oFie)
}
onload=fourUp;
</script>
</head>
<body>

</body>
</html>

martin_narg

07-07-2005, 09:44 AM

Edit: Nice one Kor, both posted at same time ;)

Example code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function fourUp() {
var four_up = [4,8,12,16,20,24,32,40,60,80,100,120];

var str = '<fieldset><legend>Number of Pads Ordered:</legend>';
for (i=0; i<four_up.length; i++) {
str += '<input type="radio" name="quantity" value="'+ i +'">'+ four_up[i] +'     &nbsp';
}
str += '<br>';
str += '<input type="radio" name="quantity" value="other"><span class="stdfnt">';
str += 'Other <input class="text" type="text" name="quantityo" size="5" max_length="5"></span>';
str += '</fieldset>';

document.getElementById("divOutput").innerHTML = str;
}

</script>
</head>

<body>
<input type="button" name="btn" value="Run the code" onclick="fourUp();"><br><br>
<div id="divOutput"></div>
</body>
</html>

You can move the div "divOutput" around setting its CSS attributes (height/width/position/top/left/etc) as you wish.

Hope this helps.

m_n

Kor

07-07-2005, 09:51 AM

yes, we have posted the same time... :) I knew that, in this particular case, the non-standard innerHTML would have made the code a little bit shorter, but it looks like a nice exercise to use DOM methods... :p

martin_narg

07-07-2005, 10:00 AM

:D :thumbsup:

Kor

07-07-2005, 10:27 AM

apowers20

07-07-2005, 04:14 PM

Thank you everyone. You all rock and the code works great. :thumbsup:

If I could buy you all beers, I would do it. :p