Output radio choice to textarea

slipskull94 · 11-06-2012, 03:50 AM

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>

jmrker · 11-06-2012, 04:28 AM

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?