Question

php JS html表单复选框提交问题

一个简易的php投票系统如下图多个复选框，

form表单<form action="vote.php" method="post">，vote.php是操作投票数据库的文件，复选款为<input name="20" type="checkbox" value="<?php echo $row_option['cid'] ?>" />，投票按钮<input name="" type="submit" onclick="checkedTest()" value="投票">执行了一个checkedTest()的JS函数，函数定义如下
<script type="text/javascript">
function checkedTest(){
var count = 0;
var checkArry = document.getElementsByName(20);
for (var i = 0; i < checkArry.length; i++) {
if(checkArry[i].checked == true){
count++;
}
}
if( count < 10 || count > 10 ){
alert("选择错误，请选择十个候选人！");
history.go(0);
}else {
}
}
</script>
这个函数想要的效果是多选框必须选中十个才能提交，选中多余少于十个都提示然后返回投票页面不执行vote.php，但是没达到效果，不管history.go(0);还是history.go(-1);结果都是提示选择错误后执行了vote.php再显示投票成功，求大神指教怎么办

Answer 1

使用onsubmit()代替onclick，并在函数中检测失败时返回false；

<form action="vote.php" method="post" onsubmit="return checkedTest()">
投票按钮<input  name="" type="submit" value="投票">
</form>
<script type="text/javascript">
function checkedTest() {
    var count = 0;
    var checkArry = document.getElementsByName(20);
    for (var i = 0; i < checkArry.length; i++) {
        if (checkArry[i].checked == true) {
            count++;
        }
    }
    if (count < 10 || count > 10) {
        alert("选择错误，请选择十个候选人！");
        return false;
    } else {
	return true;
    }
}
</script>

追问

不行还是那样，先提示选择错误，点确定再提示投票成功，还是传值给vote.php了，怎么回事

追答

哦，之前的有点问题，那个onsubmit方法需要添加到form元素上，而不是添加到input上。
只要返回false表单就不会提交。

Answer 2

当然，楼上给出的答案正确，前端验证是可以了。但是，作为一个投票系统，建议后台也同样要验证一下。

追问

楼上答案不正确啊，还是那样，先提示选择错误，点确定再提示投票成功，还是传值给vote.php了，怎么回事