Check specific radio button is checked

Question

I'm just trying to return true/false in one my my jquery methods depending on the check of a 2 radio buttons and if it's selected or not

I've tried several things but have not been able to get this right, it still submit the form without giving error that the buttons are not selected.

HTML Code

<label class="checkout-item" for="payment_1">Cash On Delivery</label>
<input type="radio" name="payment" class="radio" id="payment_1" value="3" iscod="1" onclick="selectPayment(this)">

<label class="checkout-item" for="payment_2">Credit Card / Debit Card</label>
<input type="radio" name="payment" class="radio" id="payment_2" value="9" checked="" iscod="0" onclick="selectPayment(this)">

<label class="checkout-item" for="ECS_NEEDINSURE_1">Home Delivery</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_1" value="3" checked="true" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">

<label class="checkout-item" for="ECS_NEEDINSURE_2">Self-pickup</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_2" value="8" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">

Javascript

function checkOrderForm(frm) {
    var paymentSelected = false;
    var shippingSelected = false;

    // Check whether the payment method is selected
    for (i = 0; i < frm.elements.length; i++) {
        if (frm.elements[i].name == 'shipping' && frm.elements[i].checked) {
            shippingSelected = true;
        }

        if (frm.elements[i].name == 'payment' && frm.elements[i].checked) {
            paymentSelected = true;
        }
    }

    if (!shippingSelected) {
        alert(flow_no_shipping);
        return false;
    }

    if (!paymentSelected) {
        alert(flow_no_payment);
        return false;
    }

why aren't you using the checked attribute? – madalinivascu Jun 28 '17 at 05:59 — madalinivascu, Jun 28 '17 at 05:59
https://stackoverflow.com/a/2272532/2134604 – Pandiyan Cool Jun 28 '17 at 06:00 — Pandiyan Cool, Jun 28 '17 at 06:00
Please elaborate if you think i am making any mistake – Antony Star Jun 28 '17 at 06:00 — Antony Star, Jun 28 '17 at 06:00
Yes function is being called when the form is submitted. – Antony Star Jun 28 '17 at 06:02 — Antony Star, Jun 28 '17 at 06:02

score 0 · Answer 1 · answered Jun 28 '17 at 06:12

0

You can use $("#payment_1").checked to check whether the radio is checked or not. Similarly you could use other ID's to check whether they are selected or not.

Here is the fiddle: https://jsfiddle.net/bf8bo43t/

answered Jun 28 '17 at 06:12

Nisarg Shah

14,151
6
34
55

score 0 · Accepted Answer · answered Jun 28 '17 at 06:14

If I'm understanding your question correctly, you would only like this test to pass if BOTH of the radio buttons are checked. Currently, as long as one radio button in each group is checked, the code variable will be set to true, ignoring the state of the other radio button.

For example, if ONLY one of your shipping radio buttons was checked, the shippingSelected variable would be set to true and it would remain true.

A way to fix this is to begin with shippingSelected and paymentSelected set to true, and if one of the radio buttons are found to be unchecked, the variable will be set to false.

Here's an example:

var paymentSelected = true;
var shippingSelected = true;

// Check whether the payment method is selected
for (i = 0; i < frm.elements.length; i++) {
    if (frm.elements[i].name == 'shipping' && !frm.elements[i].checked) {
        shippingSelected = false;
    }

    if (frm.elements[i].name == 'payment' && !frm.elements[i].checked) {
        paymentSelected = false;
    }
}

score 0 · Answer 3 · answered Jun 28 '17 at 06:20

Try below code,

HTML

<form method="post" name="frm_payment_types">
    <label class="checkout-item" for="payment_1">Cash On Delivery</label>
    <input type="radio" name="payment" class="radio" id="payment_1" value="3" iscod="1" onclick="selectPayment(this)">

    <label class="checkout-item" for="payment_2">Credit Card / Debit Card</label>
    <input type="radio" name="payment" class="radio" id="payment_2" value="9" iscod="0" onclick="selectPayment(this)">

    <label class="checkout-item" for="ECS_NEEDINSURE_1">Home Delivery</label>
    <input name="shipping" type="radio" id="ECS_NEEDINSURE_1" value="3" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">

    <label class="checkout-item" for="ECS_NEEDINSURE_2">Self-pickup</label>
    <input name="shipping" type="radio" id="ECS_NEEDINSURE_2" value="8" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
    <br />
    <input type="submit" name="submit" onclick="return checkOrderForm();" />
</form>

Javascript

<script type="text/javascript">
    function validateForm(){
        var payment_1 = document.getElementById('payment_1');
        var payment_2 = document.getElementById('payment_2');

        var ECS_NEEDINSURE_1 = document.getElementById('ECS_NEEDINSURE_1');
        var ECS_NEEDINSURE_2 = document.getElementById('ECS_NEEDINSURE_2');

        if((payment_1.checked == true || payment_2.checked == true) && (ECS_NEEDINSURE_1.checked == true || ECS_NEEDINSURE_2.checked == true)){
            return true;
        }
        else if(payment_1.checked == false && payment_2.checked == false){
            alert("Please select Cash On Delivery or Credit Card / Debit Card.");
        }
        else if(ECS_NEEDINSURE_1.checked == false && ECS_NEEDINSURE_2.checked == false){
            alert("Please select Home Delivery or Self-pickup.");
        }
        return false;
    }
</script>

Check specific radio button is checked

3 Answers3