Check Atleast One Checkbox Is Checked On Form Submission August 08, 2022 Post a Comment I have a form that consists of checkbox fields, now on form submission we should check whether atleast one checkbox is checked html code Solution 1: You shouldn't attach JavaScript event directly in the HTML, this is a really bad practice. Instead, because you use jQuery, you should use jQuery event handler : $('#form_check').on('submit', function (e) { if ($("input[type=checkbox]:checked").length === 0) { e.preventDefault(); alert('no way you submit it without checking a box'); return false; } }); Copy (http://jsbin.com/IXeK/1/edit) If you really want to use HTML onsubmit, even if it's bad (and you should feel bad just by thinking of it), the onsubmit should be: attached to the form should prevent the default event on submit return false So it covers everything. Like here http://jsbin.com/IXeK/2/editBaca JugaDynamically Change Multiple Hidden Form FieldsKeep Form Value After Submit ItShow And Hide Element On Mouse Over Jquery <form onsubmit="return atleast_onecheckbox(event)" id="form_check" class="form" action="/path/to/some/url" method="POST"> <div class="check_fields"> <input class="select-unselect" type="checkbox" name="invite" value=""> </div> <input type="submit" class="btn btn-primary" value="Submit" /> Copy function atleast_onecheckbox(e) { if ($("input[type=checkbox]:checked").length === 0) { e.preventDefault(); alert('no way you submit it without checking a box'); return false; } } Copy Solution 2: <script type="text/javascript"> function atleast_onecheckbox() { if (document.getElementById('invite').checked) { alert('the checkbox is checked'); } else { alert("please check atleast one.."); return false; } } </script> <form id="form_check" class="form" action="/path/to/some/url" method="POST"> {% for field in fields %} <div class="check_fields"> <input class="select-unselect" type="checkbox" name="invite" id="invite" value=""> {{field}} </div> {% endfor %} <input type="submit" class="btn btn-primary" value="Submit" onclick=" return atleast_onecheckbox()"/> </form> Copy Share You may like these postsHow To Change Background Image Dynamically Only When Radio Button Is Selected And By Pressing Submit ButtonAsk If You Are Sure You Want To Submit? JavaScript?How To Not Submit A Form If Validation Is FalseThis.form.submit() Not Working After Clicking Div Element In Form Post a Comment for "Check Atleast One Checkbox Is Checked On Form Submission"
Post a Comment for "Check Atleast One Checkbox Is Checked On Form Submission"