检查表单提交时检查至少一个复选框

时间:2013-08-22 10:43:08

标签: javascript django forms checkbox submit

我有一个由复选框字段组成的表单,现在在表单提交时我们应该检查是否选中了至少一个复选框

html代码

<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代码

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

因此,当我点击提交按钮时,表单会重定向到action中提到的网址,但它甚至没有点击javascript函数atleast_onecheckbox()

上面的代码有什么问题,有人可以让上面的代码工作吗?

2 个答案:

答案 0 :(得分:3)

你不应该直接在HTML中附加JavaScript事件,这是一个非常糟糕的做法。 相反,因为你使用jQuery,你应该使用jQuery事件处理程序:

$('#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

如果你真的想使用HTML onsubmit,即使它很糟糕(并且你只是想通过它就会感觉不好),onsubmit应该是:

  • 附于表格
  • 应该阻止提交
  • 上的默认事件
  • return false

所以它涵盖了一切。像这里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;
  }
}

答案 1 :(得分: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>