Form validation radio button?

Question

I got a form that's already using validation but I want to also include validation for the radio buttons. This is the top of the html form showing its using the onSubmit="" already.

<form id="form_603298" class="appnitro" method="post" action="" onSubmit="javascript:return validate_form();">
<fieldset>

And i added this to the bottom of the html form:

<fieldset>
    <legend>Status</legend>
    <input id="element_14_1" name="element_14" type="radio" value="1" />
    <label for="element_14_1">Active</label>
    <input id="element_14_2" name="element_14" type="radio" value="2" />
    <label for="element_14_2">Inactive</label>
    </fieldset>

Now I am trying to include the radio button validation as part of the rest of the validation script. I tried to include this at the bottom of the validation scripts:

<!--================Validate drop down options==========================-->
<script type="text/javascript" language="javascript">
function validate_dropdown(){
    var dropdown = document.getElementById('element_11');
    var dropdown = document.getElementById('element_12');
    var dropdown = document.getElementById('element_13');
    if(dropdown.selectedIndex==0){
        alert("Please select drop down options");

    return false; 
    }else{

    return true;
    }
}

<!--================Validation start and end dates==========================--> 
    $(document).ready(function() {
        $("#dataStart").datepicker({
            minDate: 1,
            onSelect: function(theDate) {
                $("#dataEnd").datepicker('option', 'minDate', new 
Date(theDate));
            },
            beforeShow: function() {
                $('#ui-datepicker-div').css('z-index', 9999);
            },
            dateFormat: 'yy/mm/dd'
        });
        $("#dataEnd").datepicker({
            beforeShow: function() {
                $('#ui-datepicker-div').css('z-index', 9999);
            },
            dateFormat: 'yy/mm/dd'
        });

    });

<!--================Validate radio buttons==========================-->

if(document.getElementById('element_14_1').checked) {
//Active radio button is checked
}else if(document.getElementById('element_14_2').checked) {
//Inactive is checked
}

This does not work. Can anyone point me in the right direction. I am new to this so I kindly ask that any explanation be simple to understand.

Answer 1

Judging from the script you provided I would assume that you have included the jQuery library on your page. If so, replace this part of your script:

if(document.getElementById('element_14_1').checked) {
//Active radio button is checked
}else if(document.getElementById('element_14_2').checked) {
//Inactive is checked
}

With this:

$(':radio').change(function() {
    if($('#element_14_1').is(':checked')) { 
      alert("Active radio checked"); 
    }
    if ($('#element_14_2')) {
     alert("Inactive radio checked"); 
    }
});

This simply adds a change event to all radio buttons and within the event we check if your radio buttons are checked.

This will show an alert a radio button is fixed but you can replace the alert with what ever you like.

If this is not what you after, please let me know and I'll adjust my answer :P

Answer 2

function checkStatus(evt) {
    var val = $("input[name=element_14]:checked").val();
    if (val == 'Active') {
        alert(val);//Active is checked
    } else {
        alert(val);//in active is checked
    }
}

$('input[name=element_14]:radio').change(checkStatus);

checkStatus();

This will resolve your issue..