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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    43
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Multiple <textarea> type="radio" Population Problem

    This script works great for populating predefined lists of data into a textarea as selected by the user using a radio button:

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Populate Textarea Based on Radio Button Selection</title>
    
    <script>
    text = new Array()
    text[0] = Array('Hotel', 'Motel'); 
    text[1] = Array('Couch', 'Bed', 'Chair'); 
    function populate(r,f){
    t=-1;
    for(var i=0;i<f.elements[r].length;i++){
    if (f.elements[r][i].checked){
    var t=i;
    }
    }
    if(t>-1){
        f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n");
    }
    }
    </script>
    
    </head>
    <body>
    <form name="frm">
    
     <input type="radio" name="test" value="0" onClick="populate(this.name,this.form)">
    
     <input type="radio" name="test" value="1" onClick="populate(this.name,this.form)">
     
     <textarea name="thefirsttextarea"></textarea>
    <input type="submit" value="submit" />
    </form>
    
    </body>
    </html>
    However, I've coded all night only to come across an issue. I have an inline page style which calls/includes multiple pages. Two of these pages require this feature. It seems one is canceling out the other. Here's an example:

    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=utf-8" />
    <title>Populate Multiple Textareas Based on Radio Button Selection</title>
    
    <script>
    text = new Array()
    text[0] = Array('Hotel', 'Motel'); 
    text[1] = Array('Couch', 'Bed', 'Chair'); 
    function populate(r,f){
    t=-1;
    for(var i=0;i<f.elements[r].length;i++){
    if (f.elements[r][i].checked){
    var t=i;
    }
    }
    if(t>-1){
        f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n");
    }
    }
    </script>
    
    <script>
    textt = new Array()
    <!--default-->
    text[0] = Array('Ham', 'Turkey', 'Chicken'); 
    
    <!--all-->
    text[1] = Array('Beer', 'Soda', 'Water');
    
    <!--johnny havana-->
    text[2] = Array('Milk', 'Cheese', 'Butter');
    
    
    function populate(r,f){
    t=-1;
    for(var i=0;i<f.elements[r].length;i++){
    if (f.elements[r][i].checked){
    var t=i;
    }
    }
    if(t>-1){
        f.SECONDFORM.value= text[t].toString().replace(/,/gi,"\n");
    }
    }
    </script>
    
    </head>
    <body>
    <form name="form">
    
     <input type="radio" name="test" value="0" onClick="populate(this.name,this.form)">
    
     <input type="radio" name="test" value="1" onClick="populate(this.name,this.form)">
     
     <textarea name="thefirsttextarea"></textarea>
    <input type="submit" value="submit" />
    </form>
    
    <form name="anotherform">
    
     <input type="radio" name="anothertest" value="0" onClick="populate(this.name,this.form)">
    
     <input type="radio" name="anothertest" value="1" onClick="populate(this.name,this.form)">
     
     <textarea name="SECONDFORM"></textarea>
    <input type="submit" value="submit" />
    </form>
    </body>
    </html>
    With the above code only the second set of radio buttons work. What I need help with is a way to have two independent sets of arrays the correspond correctly with the textareas - One set that populates textarea 1 and the other that populates textarea 2.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,980
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    You just need to pass along a reference to the textarea, too.
    Code:
    <input type="radio" name="anothertest" value="1" 
           onClick="populate(this.name,this.form,this.form.SECONDFORM)">
    But you know, you have made this whole thing *WAY* too complex!

    WAY WAY.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,980
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Try this:
    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=utf-8" />
    <title>Populate Multiple Textareas Based on Radio Button Selection</title>
    
    <script>
    var features = [
          ['Hotel', 'Motel'],
          ['Couch', 'Bed', 'Chair']
        ];
    
    var foods = [
          ['Ham', 'Turkey', 'Chicken'],
          ['Beer', 'Soda', 'Water'],
          ['Milk', 'Cheese', 'Butter']
        ];
    
    function populate(rb, aname, ta)
    {
        rb.form[ta].value = aname[rb.value].join("\n"); 
    }
    </script>
    </head>
    <body>
    <form name="form">
     <input type="radio" name="test" value="0" onClick="populate(this,features,'thefirsttextarea')">
     <input type="radio" name="test" value="1" onClick="populate(this,features,'thefirsttextarea')">
    <br>
     <textarea name="thefirsttextarea"></textarea>
    <br>
     <input type="radio" name="test2" value="0" onClick="populate(this,foods,'thesecondtextarea')">
     <input type="radio" name="test2" value="1" onClick="populate(this,foods,'thesecondtextarea')">
     <input type="radio" name="test2" value="2" onClick="populate(this,foods,'thesecondtextarea')">
    <br>
     <textarea name="thesecondtextarea"></textarea>
    <br>
     <input type="submit" value="submit" />
    </form>
    </body>
    </html>
    Having two <form>s on a page is almost always a problem, so I got rid or your second one. If you had it there for some reason *other* than getting your JS code to work, you can put it back in.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,980
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    I would also point out that you don't really *need* the JS function.

    You could easily do this all inline in the onclick.

    Example:
    Code:
    <input type="radio" name="test" value="0"
           onClick="this.form.thefirsttextarea.value=features[0].join('\n');">
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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