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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Output radio choice to textarea

    Hello all,
    I am relatively new to JavaScript and I was wondering what I am doing wrong. I am trying to get the choices that you select on my form to be able to be exported into a text area by the script itself when you press a button.
    I believe that the problem lies within my JS itself, and I have been trying to figure this out for hours. Any help would be greatly appreciated.

    Code:
    <html>
    
    <head>
    <title>Mateo's Pizza</title>
    </head>
    
    <body>
    <h1>Choose Your Pizza!</h1>
    
    <form>
    <script language="javascript">
    <!--hide
          function Process(form) 
    	{
    	NewVerse (form.Size.value, form.Crust.value, form.Topping.value)
    		}
    	function NewVerse(Size, Crust, Topping)
    	{
    	var result = "You have ordered a " + Size + "pizza with " + Crust +" crust, and " + Topping + "."
        area.value = result
        return result
       }
    	  var Selection = "none"
      //-->
      </script>
    <form Name="Size" ID="Size">
      <input type=radio name=size value="Personal" onClick="sizeSelection='Personal, '" />Personal
        <br />
      <input type=radio name=size value="Small" onClick="sizeSelection='Small, '" />Small
        <br />
      <input type=radio name=size value="Medium" onClick="sizeSelection='Medium, '" />Medium
        <br />
      <input type=radio name=size value="Large" onClick="sizeSelection='Large, '" />Large
        <br />
      <input type=radio name=size value="X-Large" onClick="sizeSelection='X-Large, '" />X-Large
        <br />
      <input type=radio name=size value="OMG!" onClick="sizeSelection='OMG!, '" />OMG!
       <br />
      <hr />
    </form>
    <form Name="Crust" ID="Crust">
    <input type=radio name="Crust" value="Thin" onClick="Crust_Selection='Thin, '">Thin</input>
        <br />
      <input type=radio name="Crust" value="Thick" onClick="Crust_Selection='Thick, '">Thick</input>
        <br />
      <input type=radio name="Crust" value="Sicilian" onClick="Crust_Selection='Sicilian, '">Sicilian</input>
       <br />
      <hr />
      </form>
    <form Name="Topping" ID="Topping">
    <input type=radio  name="topping" value="Pepperoni" onClick="toppingSelection='and Pepperoni'">Pepperoni</input>
        <br />
      <input type=radio name="topping" value="Sausage" onClick="toppingSelection='and Sausage'">Sausage</input>
        <br />
      <input type=radio name="topping" value="Mushrooms" onClick="toppingSelection='and Mushrooms'">Mushrooms</input>
        <br />
      <input type=radio name="topping" value="Black Olives" onClick="toppingSelection='and Black Olives'">Black Olives</input>
        <br />
      <input type=radio name="topping" value="Pineapple" onClick="toppingSelection='and Pineapple'">Pineapple</input>
        <br />
      <input type=radio name="topping" value="Extra Cheese" onClick="toppingSelection='and Extra Cheese'">Extra Cheese</input>
      <br />
      <input type=radio name="topping" value="Hella Cheese" onClick="toppingSelection='and Hella Cheese'">Hella Cheese</input>
    		
        <br />
      <input type=radio name="topping" value="and Is this even a pizza anymore?" onClick="topping='and Is this even a pizza anymore? '" />Is this even a pizza anymore? (Cheese)
    </form>
     <br />
      <hr />
      
      
     <form ID="TEXTAREA">
     <p>
              
              <input TYPE="button" VALUE="Submit" onClick="alert('You chose '+sizeSelection +Crust_Selection +toppingSelection)" />
            </p><p> <br />
    </p>
    
    <input TYPE="button" VALUE="Process your order!" onClick="Process(this.form)" />
       </p><p><textarea id="area" cols="100" rows="10"></textarea>
       </form></center>
      
    </form>
    
    
    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    You have a number of errors. I would suggest using the error console if you use the FF or Chrome browser.

    There are several archaic statements. See comments in following.
    There is no need to have 5 separate <form> tags. In fact, one of them has a duplicated name with the elements it contains. Guaranteed to lead to future errors.

    I would suggest looking at each line I changed in your code and find out why it is suggested.
    Code:
    <html>
    <head>
    <title>Mateo's Pizza</title>
    </head>
    <body>
    <h1>Choose Your Pizza!</h1>
    <form action="" method="post" onsubmit="return false">
    
    <script type="text/javascript"> <!-- archaic version: language="javascript" -->
    <!--hide ARCHAIC: -->
    // From: http://www.codingforums.com/showthread.php?t=281115
    
      function getRBtnName(GrpName) {
        var sel = document.getElementsByName(GrpName);
        var fnd = -1;
        var str = '';
        for (var i=0; i<sel.length; i++) {
          if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
        }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
        return str;
      } 
      function Process(form) {
        var Size = getRBtnName('size');
        var Crust = getRBtnName('crust')
        var Topping = getRBtnName('topping')
        var result = "You have ordered a " + Size + " pizza with " + Crust +" crust and " + Topping + "."
        area.value = result
        return result
      }
    var Selection = "none"
    <!--  // ARCHAIC: -->
      </script>
    
    <div>
      <input type='radio' name='size' value="Personal" />Personal    <br />
      <input type='radio' name='size' value="Small" />Small    <br />
      <input type='radio' name='size' value="Medium" />Medium    <br />
      <input type='radio' name='size' value="Large" />Large    <br />
      <input type='radio' name='size' value="X-Large" />X-Large    <br />
      <input type='radio' name='size' value="OMG!" />OMG!   <br />
      <hr />
    </div>
    
    <div>
      <input type='radio' name="crust" value="Thin" >Thin</input>    <br />
      <input type='radio' name="crust" value="Thick"> Thick</input>    <br />
      <input type='radio' name="crust" value="Sicilian" >Sicilian</input>   <br />
      <hr />
    </div>
    
    <div>
      <input type='radio' name="topping" value="Pepperoni" >Pepperoni</input>   <br />
      <input type='radio' name="topping" value="Sausage" >Sausage</input>    <br />
      <input type='radio' name="topping" value="Mushrooms" >Mushrooms</input>    <br />
      <input type='radio' name="topping" value="Black Olives" >Black Olives</input>    <br />
      <input type='radio' name="topping" value="Pineapple" >Pineapple</input>    <br />
      <input type='radio' name="topping" value="Extra Cheese" >Extra Cheese</input>  <br />
      <input type='radio' name="topping" value="Hella Cheese" ">Hella Cheese</input>    <br />
      <input type='radio' name="topping" value="and Is this even a pizza anymore?" />Is this even a pizza anymore? (Cheese)
    </div>
    <br />
    <hr />
    
    <div> <p>
      <input TYPE="button" VALUE="Submit" onClick="alert('You chose '+sizeSelection +Crust_Selection +toppingSelection)" />
      </p><p> <br /></p>
      <input TYPE="button" VALUE="Process your order!" onClick="Process(this.form)" />
      </p><p><textarea id="area" cols="100" rows="10"></textarea>
    </div>
    </center>
      
    </form>
    </body>
    </html>
    Another suggestion would be to add some error checks in case the user forgets to enter a particular selection in each group.

    Also, if you don't use the id value set elsewhere, then there is no need to set it to begin with.
    For example, why have the id of <textarea> set to 'area' when it is never used elsewhere?


  •  

    Tags for this Thread

    Posting Permissions

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