将一系列选中的复选框传递给javascript

时间:2012-12-07 11:19:37

标签: php javascript ajax

我有一些我生成的复选框值

$sql = "sql statement";
$courseResult = mysqli_query($connection, $sql);
$courses = mysqli_fetch_row($
// Display the courses the user has taken 
while ($courses) {
    echo "<td><input type='checkbox' name='coursesToAdd[]' id='coursesToAdd[]' value='$courses[0]'>$courses[0]</td></tr>";            
    $courses = mysqli_fetch_row($courseResult);
}

<input type='button' onclick='EditStudentCertificates()' value='Submit'/>

我想要做的是获取用户检入数组的值,然后从我试图这样做的javascript访问这个数组,但它似乎不起作用:

        function EditStudentCertificates(){                
            if (window.XMLHttpRequest){
                // code for IE7+, Firefox, Chrome, Opera, Safari                
                xmlhttp=new XMLHttpRequest();
            }
            else{
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }      

            var coursesToAddField = document.getElementById("coursesToAdd[]");
            var coursesToAdd = coursesToAddField ? coursesToAddField.value : '';

            xmlhttp.open("POST","updateStudentCInfo.php",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("certValue="+certValue+"&coursesToAdd="+coursesToAdd);
            window.alert("Your certificate information has been updated");
            window.location.reload();                
        }

我认为问题在于我试图从javascript中的复选框中获取值的方式,可能是:

            var coursesToAddField = document.getElementById("coursesToAdd[]");
            var coursesToAdd = coursesToAddField ? coursesToAddField.value : '';

因为变量coursesToAdd似乎除了页面上第一个复选框的值之外什么都没有,无论我在点击提交之前在页面上检查了多少个复选框。

3 个答案:

答案 0 :(得分:1)

正如我在上面的评论中提到的那样:

如果没有查看您发布的AJAX代码,那么从复选框中获取值的方式就会出现问题。您对所有复选框使用相同的ID coursesToAdd[]。这是无效的,因为所有ID都必须在页面上是唯一的。您需要使用类名。

在HTML / PHP中:

while ($courses) {
    echo "<td><input type='checkbox' name='coursesToAdd[]' class='coursesToAdd' value='$courses[0]'>$courses[0]</td></tr>";            
}

在你的JS中你可以进入这样的复选框:

var courseCheckboxes = document.getElementsByClassName("coursesToAdd");
for (var i=0; i < courseCheckboxes.length; i++) {
    if (courseCheckboxes[i].checked) {
       // do something with the checkbox
    }
}

答案 1 :(得分:0)

你正在做异步。所以你应该使用onreadystatechange事件。

尝试:

xmlhttp.onreadystatechange = function(){
    window.location.reload();       
}

删除location.reload()

答案 2 :(得分:0)

如果要通过POST传递多个值,则需要encodeURIComponent(variablename)