3

I have a form that consists of checkbox fields, now on form submission we should check whether atleast one checkbox is checked

html code

<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" value="">
          {{field}}
     </div>
  {% endfor %} 
     <input type="submit" class="btn btn-primary" value="Submit" onsubmit="atleast_onecheckbox()"/>
</form>

javascript code

<script type="text/javascript">
    function atleast_onecheckbox()
            {
             var value = $("[name=invite]:checked").length > 0);
                 alert(value) ;      
                 if (!value)
                      {
                    alert("Please.....");
                       }
            }   
</script>

So when i clicked on the submit button, the form is redirecting to the url mentioned in the action, but its not even hitting the javascript function atleast_onecheckbox()

what wrong in the above code, can anyone please make the above code work ?

Shiva Krishna Bavandla
  • 25,548
  • 75
  • 193
  • 313
  • 1
    `onsubmit` should be on the form, not the submit button. Also You'll have to either `return false` or `event.preventDefault()` to prevent the form from submitting. – Passerby Aug 22 '13 at 10:45

2 Answers2

5

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;
  }
});

(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/edit

<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" />


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;
  }
}
dievardump
  • 2,484
  • 17
  • 21
0
<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>
shemy
  • 573
  • 1
  • 5
  • 15