Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry HELP! Autofilling table/fieldset with data from array

    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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp");
    }
    this.document.write ("<br>");
    this.document.write ("<input type=radio name=quantity value=other ><span class=stdfnt>Other&nbsp;<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.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    PHP Code:
    <!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> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Edit: Nice one Kor, both posted at same time

    Example code:

    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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp';
    	}
    	str += '<br>';
    	str += '<input type="radio" name="quantity" value="other"><span class="stdfnt">';
    	str += 'Other&nbsp;<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
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script>
    I want not to be pedantic, but I guess that you should have used either

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    or
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">

    to make a valid interpretation of the script as javascript code... Well, I know that I use them both in a redundant way....
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you everyone. You all rock and the code works great.

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


  •  

    Posting Permissions

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