Javascript validating radio input not working

Question

I am using the following Javascript code to validate that at least one of the radio inputs are checked before submitting the form, but I am facing a problem as the form always submit even if there are no radio inputs checked...can someone please help by telling me what I am missing here and how to fix it? Thanks

<script type="text/javascript">

 function processPayment() {
    if ($("input[name='orderAmount']:checked").length > 0){
        alert('OK');
        document.getElementById('orderFrm').submit(); 
        return false;
    }
    else{
        alert('Please select order amount');
    }       
 }

 </script> 


<div id="content">
  <form id="orderFrm" name="orderFrm" action="https://...." method="post" target="_top">
       ....

       <div class="orderamnt">
        <label for="orderAmount50">
          <span class="labelText">50</span>
          <input type="radio" id="orderAmount50" name="orderAmount" value="50"/>
        </label>
       </div>
       <div class="orderamnt">
        <label for="orderAmount100">
          <span class="labelText">100</span>
          <input type="radio" id="orderAmount100" name="orderAmount" value="100"/>
        </label>
       </div>
       <div class="orderamnt">
        <label for="orderAmount200">
          <span class="labelText">200</span>
          <input type="radio" id="orderAmount200" name="orderAmount" value="200"/>
        </label>
       </div>

       <a class="buyNowButton" href="javascript:{}" onclick="processPayment()">Order</a>
       ....
   </form>
</div>

Note:

I noted when checking any of the radio buttons that it changes from:

  <div id="orderamnt">
    <span class="">
      <input type="radio" id="orderAmount200" name="orderAmount" value="200"/>

to...

  <div id="orderamnt">
    <span class="checked">
      <input type="radio" id="orderAmount200" name="orderAmount" value="200"/>

obviously the radio input don't have checked and that's why obviously it is not working on my side, so wondering is there a way I can validate the first parent span from the radio button?

Doesn't submit for me when nothing is selected http://jsfiddle.net/j08691/z22J4/. Also, there's no point in returning false after you submit the form. — j08691, May 09 '14 at 17:02
What version of jQuery are you running? I seem to recall having problems with `:checked` years ago that I can't duplicate with the latest jQuery now. — 75th Trombone, May 09 '14 at 17:12
@75thTrombone I've added a small edit to my question explaining how I found the html changing when checking / unchecking the radio input using Chrome dev tool — MChan, May 09 '14 at 17:18

score 0 · Answer 1 · answered May 09 '14 at 16:57

0

you need to do like this using is()

if ($('input[name="orderAmount"]').is(':checked'))
{
}

answered May 09 '14 at 16:57

Ehsan Sajjad

61,834
16
105
160

I've added a small edit to my question explaining how I found the html changing when checking / unchecking the radio input using Chrome dev tool – MChan May 09 '14 at 17:20
this one should work, see:http://stackoverflow.com/questions/15530582/check-if-a-radio-button-is-checked-jquery – Ehsan Sajjad May 09 '14 at 17:23

score 0 · Answer 2 · answered May 09 '14 at 17:47

Using jquery 1.6.4 or +, this code is working!

$('.buyNowButton').click(function(){   
    if ($("input[name='orderAmount']:checked").length > 0){   
        document.getElementById('orderFrm').submit(); 
        return false;
    }
    else{
        alert('Please select order amount');
    }       
 });

Javascript validating radio input not working

2 Answers2