Problems with Radio Buttons and Functions

HTMLscrub · 10-17-2012, 01:05 AM

Hey guys, having a hard time with this predicament. I'm trying to setup a fast-food menu where users select food options. But, I'm stuck at trying to make functions store the values of the selected radio/checked boxed.
Here's my code:

<head>
<script>
function initialize(f) {
f.size[0].checked = false;
f.size[1].checked = false;
f.size[2].checked = false;
f.size[3].checked = false;
f.sizeField.value = "";
f.costField.value = "";
}
function Psize(f) {
var psizen, psizec;
if (f.size[0].checked == true)
psizec = 6.99;
psizen = 'Item 1';
f.sizeField.value = "You've chosen " + psizen;
f.costField.value = "That will be " + psizec;
else if (f.size[1].checked == true)
psizec = 8.99;
psizen = 'Item 2';
f.sizeField.value = "You've chosen " + psizen;
f.costField.value = "That will be " + psizec;
else if (f.size[2].checked == true)
psizec = 10.99
psizen = 'Item 3';
f.sizeField.value = "You've chosen " + psizen;
f.costField.value = "That will be " + psizec;
else if (f.size[3].checked == true)
psizec = 14.99
psizen = 'Item 4';
f.sizeField.value = "You've chosen " + psizen;
f.costField.value = "That will be " + psizec;
}
</script>
</head>
<body>

<form name="sizeForm">
<input type="radio" name="size">Item 1 ($6.99)<br>
<input type="radio" name="size">Item 2 ($8.99)<br>
<input type="radio" name="size">Item 3 ($10.99)<br>
<input type="radio" name="size">Item 4 ($14.99)<br>
<br><br>
<input type="button" value="Submit Order" onclick="Psize(document.sizeForm)"><br>
<input type="text" name="sizeField" size="20"><br>
<input type="text" name="costField" size="20">
</fieldset>
</form>
</body>

----

When I load the page and select a radio button and click the submit button, nothing happens. It should display the item chosen in one text box and the price in another.

keyboard1333 · 10-17-2012, 01:51 AM

Code:

<!DOCTYPE html>
<html>
<head>
<script>
function initialize(f) {
	f.size[0].checked = false;
	f.size[1].checked = false;
	f.size[2].checked = false;
	f.size[3].checked = false;
	f.sizeField.value = "";
	f.costField.value = "";
}
function Psize(f) {
	var psizen, psizec;
	if (f.size[0].checked == true) {
		psizec = 6.99;
		psizen = 'Item 1';
		f.sizeField.value = "You've chosen " + psizen;
		f.costField.value = "That will be " + psizec;
	} else if (f.size[1].checked == true) {
		psizec = 8.99;
		psizen = 'Item 2';
		f.sizeField.value = "You've chosen " + psizen;
		f.costField.value = "That will be " + psizec;
	} else if (f.size[2].checked == true) {
		psizec = 10.99
		psizen = 'Item 3';
		f.sizeField.value = "You've chosen " + psizen;
		f.costField.value = "That will be " + psizec;
	} else if (f.size[3].checked == true) {
		psizec = 14.99
		psizen = 'Item 4';
		f.sizeField.value = "You've chosen " + psizen;
		f.costField.value = "That will be " + psizec;
	}
}
</script>
</head>
<body>

<form name="sizeForm">
<input type="radio" name="size">Item 1 ($6.99)<br>
<input type="radio" name="size">Item 2 ($8.99)<br>
<input type="radio" name="size">Item 3 ($10.99)<br>
<input type="radio" name="size">Item 4 ($14.99)<br>
<br><br>
<input type="button" value="Submit Order" onclick="Psize(document.sizeForm)"><br>
<input type="text" name="sizeField" size="20"><br>
<input type="text" name="costField" size="20">
</fieldset>
</form>
</body>
</html>

You were missing some parentheses.
Also added in html tags, a doctype and indented your javascript.

HTMLscrub · 10-17-2012, 02:06 AM

The parenthesis don't really make a different and I purposely didn't include all the tags.

keyboard1333 · 10-17-2012, 02:11 AM

The parentheses do make a difference.
If your if statement contains more than one line of code (your's does) than you have to use them.
It's a good practice to use them all the time.
Did you actually try the code I posted?
I tested it and it works fine.

keyboard1333 · 10-17-2012, 02:32 AM

Actually, this is a slightly better way to achieve the same thing (in my opinion)

Code:

<!DOCTYPE html>
<html>
<head>
<script>
function initialize(f) {
	f.size[0].checked = false;
	f.size[1].checked = false;
	f.size[2].checked = false;
	f.size[3].checked = false;
	f.sizeField.value = "";
	f.costField.value = "";
}
function Psize(f) {
	for(var i = 0; i < f.size.length; i++) { 
		var z = f.size[i]; 
		if(z.checked) { 
			var checked = z; 
			i = i + 1;
			break;
		}
	} 
	if(typeof checked != "undefined") {
		f.sizeField.value = "You've chosen Item " + i;
		f.costField.value = "That will be " + checked.value;
	}
}
</script>
</head>
<body>
<form name="sizeForm">
<input type="radio" name="size" value="6.99">Item 1 ($6.99)<br>
<input type="radio" name="size" value="8.99">Item 2 ($8.99)<br>
<input type="radio" name="size" value="10.99">Item 3 ($10.99)<br>
<input type="radio" name="size" value="14.99">Item 4 ($14.99)<br>
<br><br>
<input type="button" value="Submit Order" onclick="Psize(document.sizeForm)"><br>
<input type="text" name="sizeField" size="20"><br>
<input type="text" name="costField" size="20">
</fieldset>
</form>
</body>
</html>

Also, in your code as it is, there is no need for the function initialise().

HTMLscrub · 10-17-2012, 02:35 AM

You're actually right. My apologies. I thought JavaScript wasn't as strict as Java.

Yes, your code works fine. Thanks for the help.

So, is this portion even necessary:

Quote:

I noticed <body onload="initialize(document.PsizeForm)"> is missing.

keyboard1333 · 10-17-2012, 02:38 AM

Actually, javascript isn't as strict as java (you actually don't "have" to put the semi-colons at the end of lines, and other things like that) (But you're meant to!!!).

Nope, as I said in my above post, that bit doesn't actually do anything.

If you haven't already, try out my alternitive to your code (it's a little bit better coding wise).

HTMLscrub · 10-17-2012, 02:42 AM

I haven't tried your better method yet, but I will soon.

I'm still having difficulty understanding exactly why my code didn't work. Besides the {}, the initiliaze function and initializing in the body tag, what else was wrong with it ?

keyboard1333 · 10-17-2012, 02:50 AM

There was nothing wrong with it apart from the parentheses.
The initialise function didn't stop anything working, it just didn't do anything...