sending array via ajax to php

Question

I want to send an array of ids for the checked checkboxes via ajax to PHP. I keep getting Undefined array key "progid". when I alert the progid in jQuery I got the correct ids. I know it is duplicated question but I really searched a lot and tried a lot of solutions nothing works.

html code:

 while($row3 = $result3->fetch_assoc()) {
 $courseName = $row3['courseName'];
 $coursePrice = $row3['coursePrice'];
 $courseId = $row3['id'];
 $programList .= ' <div class="form-check">
 
 <input type="checkbox" name="course[]" class="form-check-input" id="'.$courseId.'" value="'.$coursePrice.'">
 <label class="form-check-label" for="'.$coursePrice.'">'.$courseName .' price is '.$coursePrice.'$</label>
 </div>';
 } 
 echo $programList;

jQuery code:

$('#submit').click(function() {
 var progid = [];
 $.each($("input[name='course[]']:checked"), function(){
 progid.push($(this).attr("id")); 
 }); 
 
 $.ajax({
 type: "POST",
 url: "test.php",
 data: progid,
 success: function(data){
 console.log('success: ' + progid); 
 }
 }); 
});

php code:

<?php
 extract($_POST);
 print_r($_POST);
 echo ($_POST["progid"]);
?>

Edit: when I send the data to the same page it does work and displays the array inside a span , but when I send it to another PHP file it doesn't work it displays the error.

• user8034901: You're not sending a key, try data: {progid: progid}
• Yamam: I tried this also it doesn't work.
• Don't Panic: What does your print_r($_POST); show?
• Phil: Are you checking any of the checkboxes? jQuery won't send an empty array
• Yamam: @Don'tPanic it shows me the other arrays I sent. I send the values of the checked checkboxes.

Answer 1

Because you didn't post all the html, is it possible that your submit event is not disabled with event.preventDefault(); and the ajax is not executing?

$('#submit').click(function(e) {
 e.preventDefault();
..

https://api.jquery.com/event.preventdefault/

$.ajax({
 type: "POST",
 url: "test.php",
 data: {"progid" : progid},
 success: function(data) {
 console.log('success: ' + progid); 
 }
 });

• Yamam: thanks for your reply .. but still give the same error.
• Mihai Lupu: I updated the answer with e.preventDefault()
• Yamam: I made the changes but still, it doesn't work.

Answer 2

You can use JSON.stringify() for the array:

$(document).ready(function () {
 $('#submit').click(function(e) {
 e.preventDefault();
 var progid = [];
 $.each($("input[name='course[]']:checked"), function(){
 progid.push($(this).attr("id")); 
 });
 
 let stringifyProgid = JSON.stringify(progid);
 
 $.ajax({
 type: "POST",
 url: "test.php",
 data: {progid: stringifyProgid},
 success: function(data){
 console.log('success'); 
 }
 }); 
 });
});

And in PHP you can get the array:

<?php
 $arrProgid = json_decode($_POST["progid"]);
 var_dump($arrProgid);
?>

• Yamam: I tried your solution but it doesn't work. var_dump returned null
• Dorian Rina: @Yamam I edited my answer now. Let me know if it will work
• Yamam: it didn't work either.
• Dorian Rina: check the content of progid in console with console.log(progid) before ajax
• Yamam: when I console.log(progid) inside $('#submit').click(function() { it doesn't show anything. but I delete the submit function and write the code inside ` $(document).ready(function () {` then I got the correct ids only when I return to the page after pressing the submit button.

Answer 3

I often do this with Multi Select form fields.

 var progid = [];
 $.each($("input[name='course[]']:checked"), function(){
 progid.push($(this).attr("id")); 
 });
 $.ajax({
 type: "POST",
 url: "ajax_post.php",
 data: {
 'progid[]': progid
 },
 success: function(data) {
 }
 });

Then on the PHP system the $_POST['progid'] will be an array. So all the JSON encoding and decoding others have posted is not needed.