Radio button showing only first input, how to get desired one?

Question

The radio button not working properly, it always giving male as output even if I select other radios. I am creating the json object from the submitted form and you can check in the object for radio buttons values.

<script>
  
 $.validator.setDefaults({
  submitHandler: function() {
   var $inputs = $('#myForm :input');
   var values = {};
   $inputs.each(function() {
    values[this.name] = $(this).val();
   });
   document.write(values['gender'])
   document.write("<h1>User Details</h1>");
   document.write("<table border=1><tbody>")
   for(key in values)
   {
    document.write("<tr><td>"+key+"</td><td>"+values[key]+"</td></tr>");
   }
   document.write("</tbody></table>")
  }
 });
 
 $(document).ready(function()
 {
  
  $("#myForm").validate(
    {
     rules:{
       fname:{
         required:true,
         minlength:3,
         },
       lname:{
         required:true,
         minlength:3
         },
       email:{
         required:true,
         email:true
         },
       agree:"required",
       Car:{required:true},
       gender:{required:true}
       },
     messages:
      {
       fname:{
         required:"First Name required..",
         minlength:"First Name should atleast have 3 characters..",
         uniqueUserName:"First name should be unique.."
         },
       lname:{
         required:"Last Name required..",
         minlength:"Last Name should atleast have 3 characters.."
         },
       email:{
         required:"email address required.."
         },
       agree:"Please accept our terms..",
       Car:{required:"Please select one option"},
       gender:{required:"Gender is required..."}
      }
    }
   );
 });

</script>

<!DOCTYPE html>
<html>
<head>
<title>Registration Form Using jQuery - Demo Preview</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="myForm" method="get">
 FirstName :<br>
 <input type="text" name="fname" id="fname"><br>
 LastName : <br>
 <input type="text" name="lname" id="lname" ><br>
 Email : <br>
 <input type="email" name="email" id="email"><br>
 URL : <br>
 <input type="url" name="url" id="url"><br>
 <br>
 Agree Terms:<br>
 <input type="checkbox" name="agree" id="agree"><br>
 
 Gender:<br>
 <input type="radio" name="gender" value="female" id="female"> Female<br>
 <input type="radio" name="gender" value="male" id="male"> Male<br>
 <select id="Car", name="Car">
   <option value="">Select</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
 </select><br><br>
 <button type="submit" class="submit" id="submit">Submit</button>
</form>


</body>
</html>

Help me. Thank You..

You cannot use val() for checkboxes/radios. Refer the links http://api.jquery.com/val/. http://stackoverflow.com/questions/2272507/find-out-if-radio-button-is-checked-with-jquery — Rajan Panneer Selvam, Mar 07 '16 at 12:24

Pragnesh Khalas · Answer 1 · 2016-03-07T12:34:42.010

Change script $.validator.setDefaults({ as per below

$.validator.setDefaults({
    submitHandler: function () {
        var $inputs = $('#myForm :input');
        var values = {};
        $inputs.each(function () {
            if ($(this).attr("name") == "gender" || $(this).attr("name") == "agree")
            {
                if($(this).is(":checked"))
                    values[this.name] = $(this).val();
            }
            else {
                values[this.name] = $(this).val();
            }                
        });
        document.write(values['gender'])
        document.write("<h1>User Details</h1>");
        document.write("<table border=1><tbody>")
        for (key in values) {
            document.write("<tr><td>" + key + "</td><td>" + values[key] + "</td></tr>");
        }
        document.write("</tbody></table>")
    }
});

In your script you just add text value in the collection if in case of other then text you need to add extra some logic to add that values in the collection.

In you case both radio buttons are in the loop and mail radio button render in the last so you were always fetched mail from the radio buttons because you were not added any condition radio button was checked or not.

Radio button showing only first input, how to get desired one?

1 Answers1