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

    Problems with Radio Buttons and Functions

    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.

  • #2
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.
    Last edited by keyboard1333; 10-17-2012 at 01:56 AM. Reason: Epic Fail

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The parenthesis don't really make a different and I purposely didn't include all the tags.

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 1 Time in 1 Post
    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().
    Last edited by keyboard1333; 10-17-2012 at 02:35 AM.

  • Users who have thanked keyboard1333 for this post:

    HTMLscrub (10-17-2012)

  • #6
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    <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 = "";
    }
    </script>
    I noticed <body onload="initialize(document.PsizeForm)"> is missing.

  • #7
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 1 Time in 1 Post
    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).

  • #8
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 ?

  • #9
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 1 Time in 1 Post
    There was nothing wrong with it apart from the parentheses.
    The initialise function didn't stop anything working, it just didn't do anything...


  •  

    Posting Permissions

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