...

View Full Version : Sending FormInput to Areabox



Redwards34
11-05-2012, 11:58 PM
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.


<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>

Old Pedant
11-06-2012, 12:38 AM
This line is bogus:


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

Just get rid of it.

Put
var sizeSelection = "No size selected yet";
as the first line of JS code.

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

Redwards34
11-06-2012, 01:18 AM
Why exactly does that work?

Old Pedant
11-06-2012, 01:31 AM
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


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.

Redwards34
11-06-2012, 03:05 AM
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/javascript-form/javascript-get-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.




<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>

Old Pedant
11-06-2012, 04:26 AM
Look into Array.join

But I think you are making a mistake using

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


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

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

Redwards34
11-06-2012, 08:25 PM
Look into Array.join

But I think you are making a mistake using

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


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.



<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'));

Old Pedant
11-06-2012, 10:32 PM
Yes, because no place had you defined oForm. You could have also solved it by simply defining oForm.

Redwards34
11-07-2012, 02:12 AM
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?

Old Pedant
11-07-2012, 02:29 AM
Well, since your form is declared as only <form>, you could do



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().

Redwards34
11-07-2012, 02:52 AM
Well, since your form is declared as only <form>, you could do



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.

Old Pedant
11-07-2012, 04:05 AM
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.

Redwards34
11-08-2012, 04:14 AM
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.

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.

Old Pedant
11-08-2012, 05:01 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum