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.

Are you checking any of the checkboxes? jQuery won't send an empty array — Phil
– Phil, Commented Mar 14, 2022 at 0:39
@Don'tPanic it shows me the other arrays I sent. I send the values of the checked checkboxes. — Yamam
– Yamam, Commented Mar 14, 2022 at 4:07

Mihai Lupu · Accepted Answer · 2022-03-13 20:06:22Z

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

edited Mar 13, 2022 at 20:06

answered Mar 13, 2022 at 19:50

Mihai Lupu

675 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yamam Over a year ago

thanks for your reply .. but still give the same error.

Mihai Lupu Over a year ago

I updated the answer with e.preventDefault();

Yamam Over a year ago

I made the changes but still, it doesn't work.

Dorian Rina · Accepted Answer · 2022-03-14 17:28:50Z

0

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

edited Mar 14, 2022 at 17:28

answered Mar 14, 2022 at 0:24

Dorian Rina

4193 silver badges9 bronze badges

7 Comments

Yamam Over a year ago

I tried your solution but it doesn't work. var_dump returned null

Dorian Rina Over a year ago

@Yamam I edited my answer now. Let me know if it will work

Yamam Over a year ago

it didn't work either.

Dorian Rina Over a year ago

check the content of progid in console with console.log(progid) before ajax

Yamam Over a year ago

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.

|

Pyromanci · Accepted Answer · 2022-06-16 16:57:18Z

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.

Collectives™ on Stack Overflow

sending array via ajax to php

3 Answers 3

3 Comments

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

7 Comments

Comments

Related