javascript - 创建复选框数组并将其传递给 JavaScript 函数

标签 javascript php arrays ajax checkbox

我有一个 html 表单,显示一系列复选框。复选框(称为“checkbox”的数组)是使用 php.ini 中的循环创建的。我想使用这个数组进行一些后台处理。 尝试如下使用 AJAX,但我无法让它工作。

请帮忙!

这里是 test.php:包含 html 表单:

<!DOCTYPE html>

<script language="javascript">
function activate(checkbox){

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        document.getElementById("ajaxState").innerHTML =xhttp.readyState;
        document.getElementById("ajaxStatus").innerHTML =xhttp.status;

        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("ajaxResponse").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("POST", "process.php", true);
    xhttp.setRequestHeader( "Content-Type", "application/json" );
    xhttp.send(JSON.stringify(checkbox));
}
</script>

<html>
<body>
<form>
<?php
for ($i=0; $i<10; $i++){
    echo "$i: ";
    echo "<input type='checkbox' name='checkbox[".$i."]'></input><br>";
}
?>

<button  type="button" name="button" onclick="activate(checkbox)" >Test</button>
</form>
<p>ajaxState: <span id="ajaxState"></span></p>
<p>ajaxStatus: <span id="ajaxStatus"></span></p>
<p>ajaxResponse: <span id="ajaxResponse"></span></p>

</body>
</html>

输出:没有得到任何响应。

process.php:解码json数据并显示数组

<?php 
$data = file_get_contents( "php://input" );
$checkbox = json_decode( $data, true ); 

echo "Hello!<br>";
var_dump($checkbox);
?>

注意:如果在按钮元素中我使用 this.checkbox,则 var_dump 返回 NULL。

<button  type="button" name="button" onclick="activate(this.checkbox)" >Test</button>

回应: ajax状态:4

ajax状态:200

ajax响应:您好! 空

最佳答案

检查下面的代码...

<!DOCTYPE html>

<script language="javascript">
function activate(){

    /*getting all inputs*/
    var inputs = document.getElementsByTagName("input");
    var cbs = []; //will contain all checkboxes
    var checked = []; //will contain all checked checkboxes
    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].type == "checkbox") {
        cbs.push(inputs[i]);
        if (inputs[i].checked) {
          checked.push(inputs[i]);
        }
      }
    }

    //then making a request
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        document.getElementById("ajaxState").innerHTML =xhttp.readyState;
        document.getElementById("ajaxStatus").innerHTML =xhttp.status;

        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("ajaxResponse").innerHTML = xhttp.responseText;
        }
    };
    console.log(xhttp);
    xhttp.open("POST", "process.php", true);
    xhttp.setRequestHeader( "Content-Type", "application/json" );
    xhttp.send(JSON.stringify(checked));//sending checked instead of checkbox
}
</script>

<html>
<body>
<form>
<?php
for ($i=0; $i<10; $i++){
    echo "$i: ";
    echo "<input type='checkbox' name='checkbox[".$i."]'></input><br>";
}
?>

<button  type="button" name="button" onclick="activate()" >Test</button>
</form>
<p>ajaxState: <span id="ajaxState"></span></p>
<p>ajaxStatus: <span id="ajaxStatus"></span></p>
<p>ajaxResponse: <span id="ajaxResponse"></span></p>


</body>
</html>

二手this获取所有复选框

关于javascript - 创建复选框数组并将其传递给 JavaScript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35766377/

相关文章:

javascript - Moment JS持续时间人性化更精确

javascript - 试图理解 Youtube Leanback 的实现

java - 将gzencoded数据传递给mcrypt_encrypt,解密后无法解压

php - 使用 SLIM 和 SWAGGER 的 RESTful API 文档?

C++:修改 const 的数组值

c# - 如何创建多个列表作为数组?

javascript - 使用带有 JavaScript 的离散标记检查元素是否关闭

java - 正则表达式:匹配并替换字符串中的模式,同时将匹配字符串的一部分保留在替换字符串中

php - 无法显示mysql的数据

c - 从文件中读取二维数组并打印