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 10 of 10
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    get value of radio group

    Ok, so I'm trying retrieve the value of a radio group, which ever button is selected I need to assign a value to a var. I can't seem to get this right, I'm not even sure if I'm going about this the right way. Here's my code.

    //the alert is just to see If I'm getting a value to start with.
    function validateOrder()
    {
    for (var i=0; i<document.getElementById('Size_rg').length; i++)
    {
    if (document.getElementById('Size_rg')[i].checked)
    {
    return i;
    alert(i + 'you got a value');
    }
    }
    }

    <input name="Size_rg" type="radio" value="10"/>
    <input type="radio" name="Size_rg" value="12" />
    <input type="radio" name="Size_rg" value="15" />

    <input name="Submit_but" type="button" id="Submit_but" value="Submit Order" onClick="validateOder();"/>

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
    function validateOrder() {
    var sizes=document.theForm.Size_rg;
    	for (i=0; i<sizes.length; i++) {
    		if (sizes[i].checked==true) {
    		alert(sizes[i].value + ' you got a value');		
    		return sizes[i].value;
    		}
    	}
    }
    </script>
    </head>
    <body>
    <form action="#n" name="theForm">
    <fieldset>
    <input name="Size_rg" type="radio" value="10"/>
    <input type="radio" name="Size_rg" value="12" />
    <input type="radio" name="Size_rg" value="15" />
    <input name="Submit_but" type="button" id="Submit_but" value="Submit Order" onclick="validateOrder();"/>
    </fieldset>
    </form>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks alot. But now I have another prob. When the var pizzaPrice is alerted, it only shows 1 number(4 or 5 or 7) and does'nt show the decimal like it should(4.00 or 5.00 or 7.00) Any idea whats wrong? I can post more code if needed.

    var pizzaPrice = 0;
    function validateOrder()
    {
    var sizes = document.PizzaOrder.Size_rg;
    for (i = 0; i < sizes.length; i++)
    {
    if (sizes[i].checked == true)
    {
    var sizeValue = sizes[i].value;
    }
    if (sizeValue == 10)
    {
    pizzaPrice = 4.00;
    }
    if (sizeValue == 12)
    {
    pizzaPrice = 5.00;
    }
    if (sizeValue == 15)
    {
    pizzaPrice = 7.00;
    }
    }
    alert(pizzaPrice);
    }

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You are setting numbers and so it displays the number with as few decimal places as it can. To always display two decimal places use:

    alert(pizzaPrice.toFixed(2));
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok but but I need to add aditional values to pizzaPrice as well. Like this:
    pizzaPrice = pizzaPrice + 0.50;

    I tried this:
    pizzaPrice = pizzaPrice.toFixed(2) + 0.50;
    but it just concantenates the two. I need addition.

    I tried this as well:
    pizzaPrice = parseInt(pizzaPrice.toFixed(2)) + 0.50;
    That performs addition but brings the decimal point down again.

    edit* Ok, you were right. It seems to be working if I just use toFixed(2) to the var after doing the calculations. Thanks alot. I'll post back with any other probs I may get.
    Last edited by melCarmasin; 05-12-2007 at 05:55 AM.

  • #6
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    One more question. using the for loop, or any other way, how can I use an alert if nothing is selected in the radio group.
    I tried this but I always get 3 alerts when all I need is one. How can I do this to get only one alert.

    var sizes = document.PizzaOrder.Size_rg;
    for (i = 0; i < sizes.length; i++)
    {
    if (sizes[i].checked == false)
    {
    alert('Pick an option');
    }

  • #7
    Regular Coder
    Join Date
    Apr 2007
    Posts
    295
    Thanks
    0
    Thanked 19 Times in 19 Posts
    I'd probably set a flag

    Code:
    var sizes = document.PizzaOrder.Size_rg;
    var flag = false;
    for (i = 0; i < sizes.length; i++)
    {
         if (sizes[i].checked == false)
         {
              flag = true;
         }
    }
    
    if(flag == true)
    {
         alert('Pick one');
    }

  • #8
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright guys. I'm about to pull my hair our. I have one final problem with this project. For some reason the form wont submit. I'm pretty sure it's a problem with a var that keeps track of empty fields and returns a true or false value. The form submits on true. The var is noErrors. Here's my code. I'll post the important stuff related to the problem.
    I also tired noErrors = true; with else after each if but that doesnt seem to work, unless I did something wrong.
    If anyone can help me out, it'll save me a buttload of time.

    function validateOrder()
    {
    var noErrors = true;
    if (document.getElementById('FirstName_tf').value == '')
    {
    noErrors = false;
    alert('Please fill your first name in the text field');
    }

    if (document.getElementById('LastName_tf').value == '')
    {
    noErrors = false;
    alert('Please fill your last name in the text field');
    }

    if (document.getElementById('Phone_tf').value == '')
    {
    noErrors = false;
    alert('Please enter your phone number in the text field');
    }

    if (document.getElementById('Address_tf').value == '')
    {
    noErrors = false;
    alert('Please enter your address in the text field');
    }

    var getEmail1 = document.getElementById("Email_tf").value.indexOf("@")
    var getEmail2 = document.getElementById("Email_tf").value.indexOf(".")
    if ((getEmail1 == -1) || (getEmail2 == -1))
    {
    noErrors = false;
    alert('Your email is not valid, please type in a valid email address');
    }

    var sizeError = false;
    var sizes = document.PizzaOrder.Size_rg;
    for (i = 0; i < sizes.length; i++)
    {
    if (sizes[i].checked == true)
    {
    sizeError = false;
    return sizeError;
    var sizeValue = sizes[i].value;
    }
    if (sizes[i].checked == false)
    {
    sizeError = true;
    }
    }
    if (sizeError == true)
    {
    noErrors = false;
    alert('Pick a size');
    }
    return noErrors;
    }

    <form action="private" method="post" name="PizzaOrder" target="_blank" id="PizzaOrder" onsubmit="return validateOrder();">

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    function validateOrder(frm) 
    {
      if (document.getElementById('FirstName_tf').value == '')
      {
        alert('Please fill your first name in the text field');
        document.getElementById('FirstName_tf').focus();
        return false;
      }
    
      if (document.getElementById('LastName_tf').value == '')
      {
        alert('Please fill your last name in the text field');
        document.getElementById('LastName_tf').focus();
        return false;
      }
    
      if (document.getElementById('Phone_tf').value == '')
      {
        alert('Please enter your phone number in the text field');
        document.getElementById('Phone_tf').focus();
        return false;
      }
    
      if (document.getElementById('Address_tf').value == '')
      {
        alert('Please enter your address in the text field');
        document.getElementById('Address_tf').focus();
        return false;
      }
    
      var getEmail1 = document.getElementById("Email_tf").value.indexOf("@")
      var getEmail2 = document.getElementById("Email_tf").value.indexOf(".")
      if ((getEmail1 == -1) || (getEmail2 == -1))
      {
        alert('Your email is not valid, please type in a valid email address');
        document.getElementById('Email_tf').focus();
        return false;
      }
    
      var sizeError = true;
      var sizes = frm.Size_rg;
      for (var i = 0; i < sizes.length; i++) 
      {
        if (sizes[i].checked) 
        {
          sizeError = false;
          break; 
        }
      }
      if (sizeError)
      {
        alert('Pick a size');    
        return false;   
      }
    
      return true; //all inputs are valid
    }
    ...
    <form action="private" method="post" name="PizzaOrder" target="_blank" id="PizzaOrder" onsubmit="return validateOrder(this);">
    Last edited by glenngv; 05-13-2007 at 06:05 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #10
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Edit* Ok guys nm my last post. I figured it out using glen's code. I just wasnt reading it properly and all I had to do was place the code in mine appropriately. Thanks to everyone that helped me on this project. Really appreciate it. It's great to have trust worthy forums such as this. Once again, thank you all very much

    mel.
    Last edited by melCarmasin; 05-13-2007 at 08:32 AM.


  •  

    Posting Permissions

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