創建並將複選框數組傳遞給javascript函數

我有一個顯示一系列複選框的html表單。複選框（名爲「複選框」的數組）是使用php中的循環創建的。我想用這個數組進行一些後臺處理。試圖使用AJAX如下，但我無法得到它的工作。創建並將複選框數組傳遞給javascript函數

請幫忙！

這裏是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>

響應： ajaxState：4個

ajaxStatus：200

ajaxResponse：您好！ NULL

來源

2016-03-03 annie

什麼是不工作？你能通過php服務發送有效的數據嗎？什麼是'checkbox'參數？ – Rayon

檢查下面的代碼...

<!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讓所有複選框

來源

2016-03-03 08:21:27 narasimharaosp

這工作！在javascript中正確讀取輸入是我錯過了。謝謝！ – annie

更好地利用查詢看到jQuery - AJAX 這裏實現「點擊按鈕和阿賈克斯出示身份證當前按鈕，用於第二需要的任務「。如果我理解你。

{{--include jQuery CDN Library--}} 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<button type="button" name="1" id="test" >Test</button> 
<button type="button" name="2" id="test" >Test</button> 
<button type="button" name="3" id="test" >Test</button> 
... 

<style> 
$("button#test").change(function(){ 
var id = $(this).attr('name'); 
    $.ajax({ 
     method: 'POST', 
     url: 'process.php', 
     data: {id: id} 
    }) 
     .done(function(msg){ 
      console.log('button: ' + msg); 
     }); 
});  
</style>

和PHP文件

<?php 
$data = $_POST['id'] 
$checkbox = json_encode($data); 

echo "Hello!<br>"; 
echo $data; // show id checkbox 
?>

這是簡單的實現代碼，從相同的JavaScript代碼

來源

2016-05-09 11:26:16

創建並將複選框數組傳遞給javascript函數

回答

相關問題