CODEWITHSUNDEEP
javascriptforms
mpdc
mpdc

Reputation: 3560

If Radio Button is selected, perform validation on Checkboxes

I'm trying to work this form so when the first radio button is selected, run a certain validation. When the second radio button is selected, run a different validation, etc. Currently using Alerts to check the functionality, but whichever radio button I choose I do not receive any feedback.

javascript function

<script type="text/javascript">

function validateDays() {
    if (document.form1.radio1[0].checked == true) {
        alert("You have selected Option 1");
    }
    else if (document.form1.radio1[1].checked == true) {
        alert("You have selected Option 2");
    }
    else if (document.form1.radio1[2].checked == true) {
        alert("You have selected Option 3");
    }
    else {
        // DO NOTHING
        }
    }
}

</script>

html input code

<input name="radio1" type="radio" value="option1" id="option1" onClick="validateDays();">
<input name="radio1" type="radio" value="option2" id="option2" onClick="validateDays();">
<input name="radio1" type="radio" value="option3" id="option3" onClick="validateDays();">

How do I get a different alert depending on which radio button is checked?

Eventually, each radio button will limit the number of checkboxes further down the form the user is able to select - which is why I cannot work this validation purely in to the onClick()

MORE FULL CODE - ON REQUEST

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

<script type="text/javascript">
$(document).ready(function() {
    jQuery('#3daypass').click(function mattcode() {
        jQuery('#other_2 , #other_3 , #other_4').prop('checked', true);
    });
    jQuery('#2daypass , #1daypass').click(function mattcode() {
        jQuery('#other_2 , #other_3 , #other_4').prop('checked', false);
    });
});
</script>

<script type="text/javascript">

function validateDays() {
    if (document.getElementById('3daypass').checked) {
        alert("You have selected Option 1");
    }
    else if (document.getElementById('2daypass').checked) {
        alert("You have selected Option 2");
    }
    else if (document.getElementById('1daypass').checked) {
        alert("You have selected Option 3");
    }
    else {
        // DO NOTHING
        }
    }
}

</script>

<tr>
    <td colspan="5" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="65%" valign="top"><table width="100%" height="100%" border="0" cellpadding="2" cellspacing="0">
             <tr valign="middle">
                <td height="18" colspan="2" align="left" bgcolor="#000000"><span class="boxheader"><strong>&nbsp;Conference Pass</strong></span> <span class="bodycopyWhite"> - (Please select a day pass below)</span></td>
                   </tr>
                  <tr valign="middle">
                      <td colspan="2" align="left" bgcolor="#EBEBEB"><img src="spacer.gif" width="1" height="3"></td>
             </tr>
                <tr bgcolor="#EBEBEB">
                   <td align="center" valign="top" bgcolor="#EBEBEB"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                       <tr>
                     <td width="7%"><input name="other_1" type="radio" value="3daypass" id="3daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
                        <td width="93%" class="bodyNormal"><strong>Three-day</strong> open delegate pass</td>
                     </tr>
                      <tr>
                       <td><input name="other_1" type="radio" value="2daypass" id="2daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
                    <td class="bodyNormal"><strong>Two-day</strong> open delegate pass</td>
                   </tr>
                       <tr>
                 <td><input name="other_1" type="radio" value="1daypass" id="1daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
               <td class="bodyNormal"><strong>One-day</strong> open delegate pass</td>
           </tr>
                </table></td>
           </tr>
        <tr valign="middle">
               <td colspan="2" align="left" bgcolor="#EBEBEB"><img src="spacer.gif" width="1" height="3"></td>
           </tr>
             </table>
                <br>
            <table width="100%" border="0" cellspacing="0" cellpadding="2">
                  <tr>
                      <td height="20" colspan="2" bgcolor="#000000" class="boxheader"><strong>&nbsp;Please select the days you will be attending</strong></td>
                  </tr>
           <tr>
                 <td width="9%" bgcolor="#EBEBEB"><input name="other_2" type="checkbox" id="other_2" value="Tues 5 Feb"></td>
               <td width="91%" bgcolor="#EBEBEB" class="bodycopy">Tuesday 5 February 2013 </td>
             </tr>
                 <tr>
               <td bgcolor="#EBEBEB"><input name="other_3" type="checkbox" id="other_3" value="Wed 6 Feb"></td>
             <td bgcolor="#EBEBEB" class="bodycopy">Wednesday 6 February 2013 </td>
           </tr>
               <tr>
           <td bgcolor="#EBEBEB"><input name="other_4" type="checkbox" id="other_4" value="Thurs 7 Feb"></td>
                     <td bgcolor="#EBEBEB" class="bodycopy">Thursday 7 February 2013 </td>
              </tr>

Apologies for the messy code - This was written in 2005 by someone else (with an apparent phobia of CSS) - see what I have to work with?!

Upvotes: 2

Views: 112127

Answers (4)

Fernando
Fernando

Reputation: 1124

Full validation example with javascript:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Radio button: full validation example with javascript</title>
        <script>
            function send() {
                var genders = document.getElementsByName("gender");
                if (genders[0].checked == true) {
                    alert("Your gender is male");
                } else if (genders[1].checked == true) {
                    alert("Your gender is female");
                } else {
                    // no checked
                    var msg = '<span style="color:red;">You must select your gender!</span><br /><br />';
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                }
                return true;
            }

            function reset_msg() {
                document.getElementById('msg').innerHTML = '';
            }
        </script>
    </head>
    <body>
        <form action="" method="POST">
            <label>Gender:</label>
            <br />
            <input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
            <br />
            <input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
            <br />
            <div id="msg"></div>
            <input type="submit" value="send>>" onclick="return send();" />
        </form>
    </body>
</html>

Regards,

Fernando

Upvotes: 0

Lloyd Banks
Lloyd Banks

Reputation: 36638

function validateDays() {
    if (document.getElementById("option1").checked == true) {
        alert("You have selected Option 1");
    }
    else if (document.getElementById("option2").checked == true) {
        alert("You have selected Option 2");
    }
    else if (document.getElementById("option3").checked == true) {
        alert("You have selected Option 3");
    }
    else {
        // DO NOTHING
        }
    }

Upvotes: 8

user160820
user160820

Reputation: 15200

You must use the equals operator not the assignment like

if(document.form1.radio1[0].checked == true) {
    alert("You have selected Option 1");
}

Upvotes: 1

ThiefMaster
ThiefMaster

Reputation: 318468

You need to use == or === for comparison. = assigns a new value.

Besides that, using == is pointless when dealing with booleans only. Just use if(foo) instead of if(foo == true).

Upvotes: 5

Related Questions