sending array via ajax to php - 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.

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);
}
});

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);
?>

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.