Как передать массив со всеми элементами с jquery в php

Question

Я пытаюсь передать массив из jQuery в PHP.

<input type="checkbox" id="name1" name="name[]" value="name1"> Name1 
<input type="checkbox" id="name2" name="name[]" value="name2"> Name2 
<input type="checkbox" id="name3" name="name[]" value="name3"> Name3<br /> 

<input type="checkbox" id="phone1" name="phone[]" value="samsung"> Samsung 
<input type="checkbox" id="phone2" name="phone[]" value="nokia"> Nokia 
<input type="checkbox" id="phone3" name="phone[]" value="motorola"> Motorola<br /> 

$(document).ready(function() { 
    $(":checkbox").on('change', function() { 
     var group = []; 
     var mygroup = {}; 

     $(':checkbox:checked').each(function(i){  
      var val = this.value; 
      var name = this.name; 
      mygroup[name] = val; 
      var all = name + "=" + val; 
      group.push(all); 

      $.ajax({ 
       type: "POST", 
       url: 'testdraft1.php', 
       data: mygroup, // TRIED WITH group and all also. Doesn't work. 
       success: function(data) { 
        $("#result").html(data); 
       } 
      });  
     }); 
    }); 
}); 

С помощью этого кода массив передается в PHP, но только с 1 элементом. Даже если я выберу несколько элементов. Что я делаю не так?

Answer 1

Это работает и, возможно, проще, чем использование FormData. (Обратите внимание, что я изменил name[] на name и phone[] на phone.) Я также переместил вызов AJAX за пределами цикла each.

HTML:

<input type="checkbox" id="name1" name="name" value="name1"> Name1 
<input type="checkbox" id="name2" name="name" value="name2"> Name2 
<input type="checkbox" id="name3" name="name" value="name3"> Name3<br /> 

<input type="checkbox" id="phone1" name="phone" value="samsung"> Samsung 
<input type="checkbox" id="phone2" name="phone" value="nokia"> Nokia 
<input type="checkbox" id="phone3" name="phone" value="motorola"> Motorola<br /> 

JavaScript:

$(document).ready(function() { 
    $(":checkbox").on('change', function() { 
     var mygroup = {}; 

     $(':checkbox:checked').each(function(i) { 
      var val = this.value; 
      var name = this.name; 

      mygroup[name] = (mygroup[name] || []).concat([val]); 
     }); 

     $.ajax({ 
      type: "POST", 
      url: 'testdraft1.php', 
      data: mygroup, 
      success: function(data) { 
       $("#result").html(data); 
      } 
     }); 
    }); 
}); 

EDIT

Эта линия немного запутанным:

mygroup[name] = (mygroup[name] || []).concat([val]); 

Вот более простая версия:

// initialize with an empty array if needed 
if (mygroup[name] === undefined) { 
    mygroup[name] = []; 
} 
// append the most recent value to the array 
mygroup[name].push(val); 

Answer 2

<input type="checkbox" id="name1" name="name[]" value="name1"> Name1 
<input type="checkbox" id="name2" name="name[]" value="name2"> Name2 
<input type="checkbox" id="name3" name="name[]" value="name3"> Name3 

<br /> 

<input type="checkbox" id="phone1" name="phone[]" value="samsung"> Samsung 
<input type="checkbox" id="phone2" name="phone[]" value="nokia"> Nokia 
<input type="checkbox" id="phone3" name="phone[]" value="motorola"> Motorola 

<br /> 


$(document).ready(function() { 
    $(":checkbox").on('change', function() { 

    var group=[]; //DEFINED THE ARRAY 
    var mygroup = {}; // DEFINED THE OBJECT 

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

     var val= this.value; 
     var id = this.id; 

     mygroup[id]=val; //PUSH VALUES TO THE OBJECT mygroup 

     var all = id+"="+val; 

     group.push(all); // PUSH ALL CHECKBOX VALUES TO ARRAY 

    $.ajax({ 
     type: "POST", 
     url: 'testdraft1.php', 
     data : mygroup,    //TRIED WITH group and all also. Doesn't work. 
     success: function(data){ 
     $("#result").html(data); 
    } 
    }); 

    }); 
    }); 

}); 

Использование же имя, а изменение имени изменить имя ID это будет работает для вас

Answer 3

Вы вызываете AJAX пост внутри каждого цикла, что означает, если вы проверить пять ящиков пошлешь отдельный пост для каждой итерации каждого вызова.

Это означает, что первый пост будет иметь только один флажок, то второй пост будет иметь два и т.д.

Если вы действительно хотите сделать это, то вам необходимо закрыть каждую петлю до вашего АЯКСА вызова.

Это не решит проблему с именем, но это решит причину, по которой вы получаете только один флажок, отправленный на php.

Answer 4

Есть несколько проблем, связанных с вашим кодом,

1. код AJAX должен быть вне .each функции.
2. Определить массив вне change событие.
3. Вы не можете отправить массив напрямую, как это в запросе AJAX. Используйте для этого FormData.

Так изменить код так,

$(document).ready(function() { 
     var group = []; //DEFINED THE ARRAY 
     $(":checkbox").on('change', function() { 
      $(':checkbox:checked').each(function(i) { 
       var val = this.value; 
       var name = this.name; 
      var dataObject = {}; 
      dataObject.name = name; 
      dataObject.val = val; 

      group.push(dataObject); 

     }); 
     var fd = new FormData(); 
     for (var i = 0; i < group.length; i++) { 
      fd.append(group[i].name, group[i].val); 
     } 
     $.ajax({ 
      type: "POST", 
      url: 'testdraft1.php', 
      data: fd, 
      success: function(data) { 
       $("#result").html(data); 
      } 
     }); 
    }); 
});