我有一个由复选框字段组成的表单,现在在表单提交时我们应该检查是否选中了至少一个复选框
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()
上面的代码有什么问题,有人可以让上面的代码工作吗?
答案 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应该是:
所以它涵盖了一切。像这里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>