www.webdeveloper.com
Results 1 to 6 of 6

Thread: Can't assign radio button selection to variable. Why?

Hybrid View

  1. #1
    Join Date
    Nov 2009
    Posts
    4

    Can't assign radio button selection to variable. Why?

    The form link to below performs a bit of basic calculation, adding up a total based on selections from drop-down menus.

    That portion of the form works fine. But I also need to multiply the total based on a selected value from three radio buttons.

    I thought I could find a simple script online to assign the selected radio value to a variable, then multiply the total from the drop down menus by that variable.

    But for some reason, something in the code is preventing me from getting the radio button value and assigning it to a variable. I'm a total noob to JS and I just can't determine the problem.

    Can a more experienced coder take a look?

    Your help is really appreciated.

    main form

    Javascript

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,277
    This example show how to make a loop with the common name (here browser, or dep in your case) of radio buttons...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function displayResult(){
    	var i=document.frm.browser.length-1;
    	while (-1<i && !document.frm.browser[i].checked) i--;
    	if (document.frm.browser[i].checked) document.getElementById('result').value=document.frm.browser[i].value;
    }
    </script>
    </head>
    <body>
    <p>Select your favorite browser:</p>
    <form name="frm">
    <input type="radio" name="browser" onclick="displayResult()" value="Internet Explorer">Internet Explorer<br />
    <input type="radio" name="browser" onclick="displayResult()" value="Firefox">Firefox<br />
    <input type="radio" name="browser" onclick="displayResult()" value="Opera">Opera<br />
    <input type="radio" name="browser" onclick="displayResult()" value="Google Chrome">Google Chrome<br />
    <input type="radio" name="browser" onclick="displayResult()" value="Safari">Safari<br /><br />
    Your favorite browser is: <input type="text" id="result" />
    </form>
    </body>
    </html>
    Nb : Your value (1, 50, 25) are not homogeneous (100, 50, 25 or 1, 0.5, 0,25) would be better.

  3. #3
    Join Date
    Nov 2009
    Posts
    4
    Thanks, Julien.

    One thing I noticed is that you've used an onClick handler in the html for the radio buttons. I didn't have that in my script. Here's the code I was using to try to assign the radio value to a variable:


    Code:
    function process(){
    
    var radio = "";
    
    for (i = 0; i < 3; i++){
    if (document.form_20443524032.dep[i].checked == true){
    radio = document.form_20443524032.dep[i].value; }
    }
    }

    Should I have onclick="process()" in my html?

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,277
    No, the onclick event is not useful. It was only an example, I take it in w3cScholls.com.

    Your code would be better with a document.form_20443524032.dep.length instead of the 3 (for further modifications) an only one access to the DOM (Sorry, I am reading an article about best practices).
    Code:
    function process(){
        var fradioValue = 0, cradioCol=document.form_20443524032.dep;
        for (var i = 0,l=cradioCol.length; i < l; i++){
           if (cradioCol[i].checked == true){
                 fradioValue = parseFloat(cradioCol[i].value);}
           }
        }
        //  work with the fradioValue
    }
    A while loop would be perhaps nor shorter...

  5. #5
    Join Date
    Nov 2009
    Posts
    4
    Well, I'm unfortunately still getting the same error when adding the new code, that fradioValue is undefined.

    I'm open to any other suggestions.

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,277
    The local variable fradioValue is only define in the function process(). If you want use it in a global scope, you have to write

    Code:
    var fradioValue;
    function process(){
        var cradioCol=document.form_20443524032.dep;
        fradioValue = 0; // without var 
        for (var i = 0,l=cradioCol.length; i < l; i++){
           if (cradioCol[i].checked == true){
                 fradioValue = parseFloat(cradioCol[i].value);}
           }
        }
        //  work with the fradioValue
    }
    // Now work too with fradioValue after a call to process

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles