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..
1 answers
solution1
0 2016-03-07 12:28:59
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.