CodingForums.com - Sending FormInput to Areabox

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Sending FormInput to Areabox (http://www.codingforums.com/showthread.php?t=281066)

Sending FormInput to Areabox

I am having trouble with a school assignment. I don't know much javascript and I am having trouble getting a radio selection to appear inside an areaBox. Here is my code that is not working correctly.

Code:

<html>

<head>



<script type="text/javascript"> 

                function write(selection)

                {

                var string= "You have selected" +selection;

                return string

                

                }

                

                function textWrite()

                {

                sizeSelection = document.getElementByName('size').value;

                

                var result=write(sizeSelection);

                document.getElementById('outputID').value = result;

                return result;

                }



</script>

</head>

<body>



                <form>

                        <p>What Size Pizza?</p>

                        <script>

                        var sizeSelection;

                        </script>

                          <input type=radio name="size" onClick="sizeSelection='Personal'" />Personal.

                                <br />

                          <input type=radio name="size" onClick="sizeSelection='Small'" />Small.

                                <br />

                          <input type=radio name="size" onClick="sizeSelection='Medium'" />Medium.

                                <br />

                          <input type=radio name="size" onClick="sizeSelection='Large'" />Large.

                           <br />

                          <input type=radio name="size" onClick="sizeSelection='Extra-Large'" />Extra-Large.

                           <br />

                          <input type=radio name="size" onClick="sizeSelection='OMG'" />OMG.

                                

                                <p><input type="button" value="Submit" onclick="textWrite();" /></p>                        

                    

                                <p>

                                        <b>Output</b>: <textarea TYPE="text" NAME="output" ID="outputID" SIZE="50"/></textarea>

                                        </p>

                                  

                                </form>

                                        

                                        

                                </select>

                                

</form>

         

         

</body>

</html>

This line is bogus:

Code:

sizeSelection = document.getElementByName('size').value;

Just get rid of it.

Put

Code:

var sizeSelection = "No size selected yet";

as the first line of JS code.

This isn't an elegant solution, but it should work.

Why exactly does that work?

Because your code is doing it!

You are doing onClick="sizeSelection='Small'" so you *ARE* setting the (now global) variable sizeSelection according to what was clicked on.

When you were doing

Code:

sizeSelection = document.getElementByName('size').value;

that code was wrong and was WIPING OUT the value that the onclick had already put there.

When you are ready, go looking (you can search in this forum) for how to get the value of the checked radio button in a set of radio buttons. Then you won't need the onclick handlers any more.

I was able to an extra radio button but I came up on a problem when I was trying to access the info from a multi-selection form. I tried basing my code for this off of this page.

http://www.javascript-coder.com/java...t-select.phtml

The biggest problem I am coming up with is how to display the info from the multi-selection with the current info. I understand that I have to call the function somewhere but I don't know how to display the info of an array in javascript in this situation.

Code:

<html>

<head>



<script type="text/javascript"> 

                function write(crustSelection,sizeSelection)

                {

                var string= "You have selected " +sizeSelection+ " as your size " + "\n\n" + "You have Selected " + crustSelection + " as your crust";

                return string

                

                }

                function getSelectedOptions(oList)

                {

                   var sdValues = [];

                   for(var i = 1; i < oList.options.length; i++)

                   {

                          if(oList.options[i].selected == true)

                          {

                          sdValues.push(oList.options[i].value);

                          }

                   }

                   return sdValues;

                }

                

                function textWrite(crustSelectionFinal,sizeSelectionFinal)

                {

                

                var result=write(crustSelectionFinal,sizeSelectionFinal);

                document.getElementById('outputID').value= result;

                return result;

                }



</script>

</head>

<body>



                <form>

                        <p>What Size Pizza?</p>

                        <script>

                        var sizeSelection = "No size selected yet";

                        </script>

                          <input type=radio name="size" onClick="sizeSelection='Personal'" />Personal.

                                <br />

                          <input type=radio name="size" onClick="sizeSelection='Small'" />Small.

                                <br />

                          <input type=radio name="size" onClick="sizeSelection='Medium'" />Medium.

                                <br />

                          <input type=radio name="size" onClick="sizeSelection='Large'" />Large.

                           <br />

                          <input type=radio name="size" onClick="sizeSelection='Extra-Large'" />Extra-Large.

                           <br />

                          <input type=radio name="size" onClick="sizeSelection='OMG'" />OMG.

                                



                    

                        <p>What Type of Crust?</p>

                        <script>

                        var crustSelection = "No crust selected yet";

                        </script>

                          <input type=radio name="crust" onclick="crustSelection='Thin'" />Thin.

                                <br />

                          <input type=radio name="crust" onclick="crustSelection='Thick'" />Thick.

                                <br />

                          <input type=radio name="crust" onclick="crustSelection='Sicilian'" />Sicilian.

                                <p><input type="button" value="Submit" onclick="textWrite(crustSelection,sizeSelection)" /></p>

                        

                        <p>What toppings? (May choose more than 1)</p>

                                <select name="topping" id='slt_topping' size="8" multiple="yes">

                                        <option value='1'>Sausage</option>

                                        <option value='2'>Pepperoni</option>

                                        <option value='3'>Mushrooms</option>

                                        <option value='4'>Olives</option>

                                        <option value='5'>Pineapple</option>

                                        <option value='6'>Extra Chesse</option>

                                        <option value='7'>Bacon</option>

                                        <option value='8'>Anchovies</option>

                                        <br />

                                        

                                        



                                <p>

                                        <b>Output</b>: <textarea TYPE="text" NAME="output" ID="outputID" SIZE="50"/></textarea>

                                        </p>

                                  

                                </form>

                                        

                                        

                                </select>

                                

</form>

         

         

</body>

</html>

Look into Array.join

But I think you are making a mistake using

Code:

sdValues.push(oList.options[i].value);

instead of

Code:

sdValues.push(oList.options[i].text);

How useful is it to say "Your topping choices are: 1,7,8"??

Quote:

Originally Posted by Old Pedant (Post 1289083)

Look into Array.join

But I think you are making a mistake using

Code:

sdValues.push(oList.options[i].value);

instead of

Code:

sdValues.push(oList.options[i].text);

How useful is it to say "Your topping choices are: 1,7,8"??

Ok I tried that and I think I am a bit closer. I think the problem I am running into is that I am not sending up the array for the toppings properly.

Code:

<html>

<head>



<script type="text/javascript"> 

                function write(crustSelection,sizeSelection)

                {

                var toppingSelectionArray=getSelectedOptions(oForm.elements["topping"];)

                var toppingSelection=toppingSelectionArray.join();

                var string= "You have selected " +sizeSelection+ " as your size " + "\n\n" + "You have Selected " + crustSelection + " as your crust" + "\n\n"+ " You have selected " +toppingSelection +" as your topping(s)";

                return string

                

                }

                function getSelectedOptions(oList)

                {

                   var sdValues = [];

                   for(var i = 1; i < oList.options.length; i++)

                   {

                          if(oList.options[i].selected == true)

                          {

                          sdValues.push(oList.options[i].text);

                          }

                   }

                   return sdValues;

                }

                

                function textWrite(crustSelectionFinal,sizeSelectionFinal)

                {

                

                var result=write(crustSelectionFinal,sizeSelectionFinal);

                document.getElementById('outputID').value= result;

                return result;

                }



</script>

</head>

<body>



                <form>

                        <p>What Size Pizza?</p>

                        <script>

                        var sizeSelection = "No size selected yet";

                        </script>

                          <input type=radio name="size" onClick="sizeSelection='Personal'" />Personal.

                                <br />

                          <input type=radio name="size" onClick="sizeSelection='Small'" />Small.

                                <br />

                          <input type=radio name="size" onClick="sizeSelection='Medium'" />Medium.

                                <br />

                          <input type=radio name="size" onClick="sizeSelection='Large'" />Large.

                           <br />

                          <input type=radio name="size" onClick="sizeSelection='Extra-Large'" />Extra-Large.

                           <br />

                          <input type=radio name="size" onClick="sizeSelection='OMG'" />OMG.

                                



                    

                        <p>What Type of Crust?</p>

                        <script>

                        var crustSelection = "No crust selected yet";

                        </script>

                          <input type=radio name="crust" onclick="crustSelection='Thin'" />Thin.

                                <br />

                          <input type=radio name="crust" onclick="crustSelection='Thick'" />Thick.

                                <br />

                          <input type=radio name="crust" onclick="crustSelection='Sicilian'" />Sicilian.

                                <p><input type="button" value="Submit" onclick="textWrite(crustSelection,sizeSelection)" /></p>

                        

                        <p>What toppings? (May choose more than 1)</p>

                                <select name="topping" id='slt_topping' size="8" multiple="yes">

                                        <option value='1'>Sausage</option>

                                        <option value='2'>Pepperoni</option>

                                        <option value='3'>Mushrooms</option>

                                        <option value='4'>Olives</option>

                                        <option value='5'>Pineapple</option>

                                        <option value='6'>Extra Chesse</option>

                                        <option value='7'>Bacon</option>

                                        <option value='8'>Anchovies</option>

                                        <br />

                                        

                                        



                                <p>

                                        <b>Output</b>: <textarea TYPE="text" NAME="output" ID="outputID" SIZE="50"/></textarea>

                                        </p>

                                  

                                </form>

                                        

                                        

                                </select>

                                

</form>

         

         

</body>

</html>

I think I solved the problem by changing

var toppingSelectionArray=getSelectedOptions(oForm.elements["topping"];)

to
var toppingSelectionArray=getSelectedOptions(document.getElementById('slt_topping'));

Yes, because no place had you defined oForm. You could have also solved it by simply defining oForm.

Quote:

Originally Posted by Old Pedant (Post 1289464)

Yes, because no place had you defined oForm. You could have also solved it by simply defining oForm.

Yes I realized that. I just wan't sure how I would define oForm. Would it be a form id?

Well, since your form is declared as only <form>, you could do

Code:

var oForm = document.forms[0]; // first form in the page

But yes, in general you should give an id to a <form> and then reference it via document.getElementById().

Quote:

Originally Posted by Old Pedant (Post 1289523)

Well, since your form is declared as only <form>, you could do

Code:

var oForm = document.forms[0]; // first form in the page

But yes, in general you should give an id to a <form> and then reference it via document.getElementById().

I see, each form is placed in an array regardless I assume. Thank you for your help, I am not familiar with implied languages for programming and have been having difficulty.

I don't think what you have here is an "implied language".

JavaScript is pretty darned explicit.

What you have is an "implied conversion of the HTML of a page into the Document Object Model (DOM)."

Yes, sometimes that conversion is by no means clear. As in the case of all forms being stuffed into the document.forms collection. Trust me, you will find worse (more obscure) to come.

But don't blame JavaScript. The DOM is *NOT* part of the language. In fact, in MSIE, you can reference all DOM elements, et al., using VBScript language. And yes, all the quirks of the DOM are identical then, in either JavaScript of VBScript.

Quote:

Originally Posted by Old Pedant (Post 1289538)

I don't know why I said implied I meant to say interpreted. I am so used to using a compiler to tell me my syntax errors right away. I learned to do things a little bit more piece by piece with javascript though.

LOL! On that we are 100% agreed.

However, if you learn to use a JavaScript debugger (I like the one in Chrome, but MSIE 9 is almost identical and Firebug for FireFox is nearly as good), you *will* get all your syntax errors, and more. Not at "compile time" but at least, for syntax errors, as soon as the page is loaded.

But I'm with you. I *LIKE* compiled languages. Java, C++, C#, even VB.NET in STRICT mode.