無法使用jQuery AJAX創建複選框數組PHP

Question

我很接近但錯過了一些東西。我試圖通過jQuery將多個複選框的變量傳遞給一個php頁面。我的代碼：

<div id="students"> 
    <div class="field"> 
     <label> 
      <input type="checkbox" name="pupil[a]" value="a" id="pupil"/> 
      Pupil A 
     </label> 
    </div> 
    <div class="field"> 
     <label> 
      <input type="checkbox" name="pupil[b]" value="b" id="pupil"/> 
      Pupil B 
     </label> 
    </div> 
    <div class="field"> 
     <label> 
      <input type="checkbox" name="pupil[c]" value="c" id="pupil"/> 
      Pupil C 
     </label> 
    </div> 
</div> 
<br /><br /> 
<div id="occupation"> 
    <div class="field"> 
     <label> 
      <input type="checkbox" name="occupation[Software]" value="Software" id="occupation"/> 
      Software 
     </label> 
    </div> 
    <div class="field"> 
     <label> 
      <input type="checkbox" name="occupation[Marketing]" value="Marketing" id="occupation"/> 
      Marketing 
     </label> 
    </div> 
    <div class="field"> 
     <label> 
      <input type="checkbox" name="occupation[Teacher]" value="Teacher" id="occupation"/> 
      Teacher 
     </label> 
    </div> 
</div> 

我的jQuery：

$(document).ready(function(){ 
    $(":checkbox").on('change', function() { 
     var val = []; 
     var myval = []; //defining to pass with AJAX 
     var theval =[]; //defining to pass with AJAX 

     $(':checkbox:checked').each(function(i){ 

      myval[i] = $(this).attr('id'); 
      theval[i] = $(this).attr('name'); 
      var newval = myval[i] +"="+ myval[i]; 


      $.ajax({ 
     type: "POST", 
     url: 'draftdata.php', 
     data : { newval},  //tried this and 
     data : {myval : theval}, // and tried this too 
     success: function(data){ 
     $("#result").html(data); 
     } 
     }); 

}); 

}); 

}); 

我只是想傳遞是在複選框PHP檢查數據。可能有多組複選框，因此無法定義$_POST['desiredValue']。所以我只能檢查它是否由if(isset($_POST['desiredValue']))設置。

當我檢查軟件，市場營銷和教師和draftdata.php做一個print_r($_POST[])，我得到：

Array 
(
    [myval] => Array 
     (
      [0] => Software 
      [1] => Marketing 
      [2] => Teacher 
     ) 

) 

我想的是：

Array 
(
    [0] => 'occupation' = 'Software' 
    [1] => 'occupation' = 'Marketing' 
    [2] => 'occupation' = 'Teacher' 
) 

我缺少什麼？

謝謝。

Answer 1

我加入了形式和

<button type="button" name="button" id="fsubmit">Submit</button> 

，然後使用按鈕#fsubmit的ID爲我們的jQuery修改HTML代碼以這種方式，

<form id="myform" class="" action="draftdata.php" method="post"> 
     <div id="students"> 
      <div class="field"> 
       <label> 
        <input type="checkbox" name="pupil[]" value="a" id="pupil" /> Pupil A 
       </label> 
      </div> 
      <div class="field"> 
       <label> 
        <input type="checkbox" name="pupil[]" value="b" id="pupil" /> Pupil B 
       </label> 
      </div> 
      <div class="field"> 
       <label> 
        <input type="checkbox" name="pupil[]" value="c" id="pupil" /> Pupil C 
       </label> 
      </div> 
     </div> 
     <br /> 
     <br /> 
     <div id="occupation"> 
      <div class="field"> 
       <label> 
        <input type="checkbox" name="occupation[]" value="Software" id="occupation" /> Software 
       </label> 
      </div> 
      <div class="field"> 
       <label> 
        <input type="checkbox" name="occupation[]" value="Marketing" id="occupation" /> Marketing 
       </label> 
      </div> 
      <div class="field"> 
       <label> 
        <input type="checkbox" name="occupation[]" value="Teacher" id="occupation" /> Teacher 
       </label> 
      </div> 
     </div> 
     <button type="button" name="button" id="fsubmit">Submit</button> 
    </form> 

。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#fsubmit").click(function(e) { 
     var val = []; 
     var id = []; //defining to pass with AJAX 
     var name = []; //defining to pass with AJAX 
     var val = []; 

     $('input:checkbox:checked').each(function(i, v){ 
      id[i] = $(this).attr('id'); 
      name[i] = $(this).attr('name'); 
      val[i] = $(this).val(); 
     }); 

      var url = $('#myform').attr('action'); 
      $.ajax({ 
       url: url, 
       type: "POST", 
       dataType: 'json', 
       data : { 
        'id': id, 
        'name': name, 
        'val': val 
       }, 
       success: function(data) { 
        // $("#result").html(data); 
        console.log(data); 
       } 
      }); 
    }); 
}); 
</script> 

通知，我改變一些變量，根據您的需要改變這一狀況，

var val = []; 
var id = []; //defining to pass with AJAX 
var name = []; //defining to pass with AJAX 
var val = []; 

，也加入這個

var url = $('#myform').attr('action'); 

，並dataType: 'json'，

當用戶點擊按鈕時，jquery會做什麼，從表單動作和l獲取鏈接ook檢查值並將其發送到php。

這裏的PHP

<?php 
if (isset($_POST['id'])) { 
    $temp['id'] = $_POST['id']; 
} 
if (isset($_POST['name'])) { 
    $temp['name'] = $_POST['name']; 
} 
if (isset($_POST['val'])) { 
    $temp['val'] = $_POST['val']; 
} 
$data['data'] = $temp; 
echo json_encode($data); 

檢查日誌結果的樣品，

希望這有助於