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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    If statement and radio buttons

    Hello,
    I have a form with two yes/no questions that have radio buttons for the yes or no answer. Each question has a yes and a no button. If the user answers yes to the first question then they must answer the second question. If they answer no to the first question then they don't have to answer the second question. I have some code to pop an alert if the first question is not answered but I haven't been able to make the second part work (if answer is yes, then pop an alert if the second question is not answered or forget it if it is not. The radio buttons for the first question each have the same name (yesNo1) but one value is yes and the other is no. The second question buttons have the name yesNo2.

    Here's the code for the first part:
    Code:
    function radio_button_checker()
    {
    // set var radio_choice to false
    var radio_choice = false;
    
    // Loop from zero to the one minus the number of radio button selections
    for (counter = 0; counter < frm1.yesNo1.length; counter++)
    {
    // If a radio button has been selected it will return true
    // (If not it will return false)
    if (frm1.yesNo1[counter].checked)
    radio_choice = true; 
    }
    
    if (!radio_choice)
    {
    // If there were no selections display an alert box 
    alert("Please select Yes or No to the first question of Section D.")
    return (false);
    }
    return (true);
    }
    I thought I could use the same code with some name changes and with an If statement to check the second question but I haven't been able to get it right at all and I spent all day messing with this stuff. I thought I should put the code for the second question check right in the spot where the return (true) is but so far no luck. I'm new to javascript so any help would be appreciated.

    Thanks,

    Rick

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,933
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    Best thing to do is create a FUNCTION that gets the value of a SET of radio buttons.

    Thus:
    Code:
    function rbsValue( rbs )
    {
        if ( rbs.length == null )
        {
            // only one radio button, so no array:
            return rbs.checked ? rbs.value : null;
        }
        // 2 or more:
        for ( var r = 0; r < rbs.length; ++r ) 
        {
            var rb = rbs[r];
            if ( rb.checked ) return rb.value;
        }
        // none checked:
        return null;
    }
    Now you can use that in your other code via stuff like:
    Code:
    var q1val = rbsValue( frm1.question1 );
    if ( q1val == null ) 
    {
       alert("You must answer question 1");
    } else {
        if ( q1val == "yes" && rbsValue( frm1.question2 ) == null )
        {
            alert("You answered yes to question 1 so you must answer question 2");
            ...
        }
    }
    or however you want your logic to work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    maybe use something like this as a guide
    Code:
    <html>
        <head>
            <title></title>
            <script type="text/javascript">
            function validateRadios(){
                var oRadQ1 = document.getElementsByName('radQ1');
                var oRadQ2 = document.getElementsByName('radQ2');
                if(!getRadBtnValue(oRadQ1)){return false;}
                if(getRadBtnValue(oRadQ1) == 'yes' && !getRadBtnValue(oRadQ2)){
                    alert("Q1 was answered as 'yes'\n\nYou must answer Q2 as well");
                    return false;
                }
                return true;
            }
            function getRadBtnValue(oRads){
                for(i=0; i < oRads.length; i++){
                    if(oRads[i].checked){return oRads[i].value;}
                }
                return false;
            }
            </script>
        </head>
        <body>
            <form id="myForm" method="post" action="xxx" onsubmit="return validateRadios()">
                <p>Q1</p>
                <div>
                    <input type="radio" name="radQ1" value="yes"/>Yes
                    <input type="radio" name="radQ1" value="no"/>No
                </div>
                <p>Q2</p>
                <div>
                    <input type="radio" name="radQ2" value="yes"/>Yes
                    <input type="radio" name="radQ2" value="no"/>No
                </div>
                <input type="submit" value="Submit" />
            </form>
        </body>
    </html>
    Last edited by bullant; 03-25-2011 at 07:40 AM.

  • #4
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bullant, OldPedant,

    Thank you for your help. I am always amazed at how you guys know this stuff so well and the help that is available in these forums.

    I got it working fine in Firefox but in IE there is a problem. When the alert says "Since you answered question 1 then you must answer question 2", I say OK and then it goes to the next page without allowing me to choose. Firefox waits for me to choose. Any ideas? IE is version 8.0.6 and Firefox is version 4 (the new one).

    Here is the code with the radio button part of the form.

    Thanks,

    Rick

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Proposition 84 Online Application</title>
    <script language="JavaScript">
    <!-- begin
    
    function radio_button_checker()
    {
    // set var radio_choice to false
    var radio_choice = false;
    
    // Loop from zero to the one minus the number of radio button selections
    for (counter = 0; counter < frm1.yesNo1.length; counter++)
    {
    // If a radio button has been selected it will return true
    // (If not it will return false)
    if (frm1.yesNo1[counter].checked)
    radio_choice = true; 
    }
    
    if (!radio_choice)
    {
    // If there were no selections display an alert box 
    alert("Please select Yes or No to the first question of Section D.")
    return (false);
    }
    return (true);
    }
    
            function validateRadios(){
                var oyesNo1 = document.getElementsByName('yesNo1');
                var oyesNo2 = document.getElementsByName('yesNo2');
                if(!getRadBtnValue(oyesNo1)){return false;}
                if(getRadBtnValue(oyesNo1) == 'yes' && !getRadBtnValue(oyesNo2)){
                    alert("Question 1 was answered as 'yes'\n\nYou must answer Question 2 as well");
                    return false;
                }
                return true;
            }
            function getRadBtnValue(oRads){
                for(i=0; i < oRads.length; i++){
                    if(oRads[i].checked){return oRads[i].value;}
                }
                return false;
            }
    
    //End-->
    </script>
    
    
    </head>
    
    <body>
    <form autocomplete="off" method="post" action="prop84Form1.asp" name="frm1" onSubmit="return (verifyData(frm1) && radio_button_checker() && validateRadios())">
    
     </table>
    </tbody>
     <tr>
      <td style="background: rgb(217, 217, 217); padding: 0pt 5.4pt;" valign="center" colspan="3" width="570"><p><span style="font-size: 10pt;">Is
      the owner of the real property different than the owner listed above?</span></p>
      </td>
      <td style="padding: 0pt 5.4pt;" valign="center" width="200"><p><span style="font-size: 10pt;"><label><input type="radio" name="yesNo1" value="yes"> Yes</label><label><input type="radio" name="yesNo1" value="no"> No</label></span></p>
      </td>
     </tr>
     
     <tr>
      <td>&nbsp;
        </td>
      <td>&nbsp;
        </td>
     </tr>
     
     <tr>
      <td style="background: rgb(217, 217, 217); padding: 0pt 5.4pt;" valign="center" colspan="3" width="570"><p><span style="font-size: 10pt;">IF YOU ANSWERED YES TO THE ABOVE QUESTION does your lease agreement allow for physical improvements to the facility?</span></p>
      </td>
      <td style="padding: 0pt 5.4pt;" valign="center" width="200"><p><span style="font-size: 10pt;"><label><input type="radio" name="yesNo2" value="yes"> Yes</label><label><input type="radio" name="yesNo2" value="no"> No</label></span></p>
      </td>
     </tr>
     
     <tr>
      <td>&nbsp;
        </td>
      <td>&nbsp;
        </td>
     </tr>
     
      <tr>
      <td><input type="submit" name="send" value="Submit and Proceed to Form 2">
        </td>
      <td>&nbsp;
        </td>
     </tr>
     </tbody>
    </table>
     </form>

  • #5
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bullant, OldPedant,

    Ignore that last post. The page must not have refreshed. Now it is working in IE also. Thanks so much for your help!!

    Rick

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome


  •  

    Posting Permissions

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