How to pass the array value to PHP using AJAX?

Question

I am trying to submit data to the database using AJAX. I have one array and I have to pass the value of the array to PHP using AJAX to display all the related records.

<form id="search-form" method="POST">
  <input value="4869" name="compare_id[]" type="hidden">
  <input value="4884" name="compare_id[]" type="hidden">
  <input value="5010" name="compare_id[]" type="hidden">
  <input type="button" id="search-button" name="search-button" value="search">
</form>
<div id="response"></div>

AJAX

<script>
    $(document).ready(function(){
        $('#search-button').click(function(){
            $.ajax( {
                type: 'POST',
                url: 'response.php',
                data: $('#search-form').serialize(),
                dataType: 'json',
                success: function(response) {
                    $('#response').html(response);
                    //alert(response);
                }
            });
        });
    });
</script>

PHP

$sql='SELECT Name, Email FROM request WHERE Id IN (' .( is_array( $_POST['compare_id'] ) ? implode( ',', $_POST['compare_id']) : $_POST['compare_id'] ).')';

    $records = array();
    $query=$conn->query($sql);

    if ($query->num_rows > 0) {
    while($row=$query->fetch_assoc()){ 
        $records[]=$row;
    }
}
echo json_encode($records);exit();

you are trying to add an array with string here data:'all='+compare_id,, convert your array in json then pass, or simply pass the array as data:compare_id, — RAUSHAN KUMAR
– RAUSHAN KUMAR, Commented Aug 29, 2017 at 12:05
compare_id.push($(this).val()); will get you the value of button not the hidden elements — Nagarjun
– Nagarjun, Commented Aug 29, 2017 at 12:06
@B.Desai, But I have same name and Id because with the help of AJAX I am displaying that input field. — user6930268
– user6930268, Commented Aug 29, 2017 at 12:07

Mihai Matei · Accepted Answer · 2017-08-29 12:09:13Z

1

HTML

<form id="search-form" method="POST">
  <input value="4869" name="compare_id[]" type="hidden">
  <input value="4884" name="compare_id[]" type="hidden">
  <input value="5010" name="compare_id[]" type="hidden">
  <input type="button" id="search-button" name="search-button" value="search">
</form>
<div id="response"></div>

JS

<script>
    $(document).ready(function(){
        $('#search-button').click(function(){
            $.ajax( {
                type: 'POST',
                url: 'response.php',
                data: $('#search-form').serialize(),
                dataType: 'json',
                success: function(response) {
                    $('#response').html(response);
                }
            });
        });
    });
</script>

PHP

var_dump($_POST['compare_id']);
// it is already an array of ids. You can do whatever you want with it.

answered Aug 29, 2017 at 12:09

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

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

2 Comments

B. Desai Over a year ago

just trying to posting same answer. but you have done faster +1 :)

user6930268 Over a year ago

@Matei Mihai, But When I clicked on the button then nothing is happing.

B. Desai · Accepted Answer · 2017-08-29 12:50:21Z

0

change your script as below. Your output is in array so you cant add it in div directly

<script>
    $(document).ready(function(){
        $('#search-button').click(function(){
            $.ajax( {
                type: 'POST',
                url: 'action.php',
                data: $('#search-form').serialize(),
                dataType: 'json',
                success: function(response) {
                     $('#response').html();
                    for(data in response) //loop over your data
                    {
                      $('#response').append(response[data].Email);  //add email
                    }

                    //alert(response);
                }
            });
        });
    });
</script>

answered Aug 29, 2017 at 12:50

B. Desai

16.4k5 gold badges28 silver badges48 bronze badges

5 Comments

user6930268 Over a year ago

Why the output is not displaying on the screen. I am getting output in the Network->XHR and I clicked on link and Response tab

B. Desai Over a year ago

Because it is in array. Try my code and tell emails are displaying or not

user6930268 Over a year ago

Emails are displaying but not on screen. I check in network tab. How to display on screen

B. Desai Over a year ago

With above code also its not displaying on screen? Have you added this:

for(data in response) //loop over your data                     {                       $('#response').append(response[data].Email);  //add email                     }

?

user6930268 Over a year ago

Yes, It's working properly. There was an issue from my end. Thanks for help

Pobe · Accepted Answer · 2017-08-29 12:11:56Z

0

There are errors in your code. A good way to debug this is to print_r your POST value in your php script.

First $_POST["All"] does not exist. It is all. (php)

Second, you send a GET request not a POST one. (jQuery)

Third, format your date into json. A good way to do this is to create a variable right after compare_id.push, it's more readable, as so :

var json_data = {"my_array" : [1,2, "bonjour", 4]};

Your problem is mostly related to "how to debug". I think you should print what's happening along the way to figure out what's happening.

answered Aug 29, 2017 at 12:11

Pobe

2,8031 gold badge20 silver badges25 bronze badges

1 Comment

user6930268 Over a year ago

Thanks for noticing bugs in the code @Pobe. Upvote from my side

Collectives™ on Stack Overflow

How to pass the array value to PHP using AJAX?

3 Answers 3

2 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related