Passing a JavaScript array to PHP

Question

I have a list like this in a php file:

<ul id="alist">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

Using jquery I've been able to grab that list:

var array = [];
$("#alist li").each(function() {
    array.push($(this).text())
});

After reading several posts about using json, ajax, this is what i have tried without success. In my js file:

$.ajax({
    type: "POST",
    url: "checklist.php",
    data: { kvcArray : array},
    success: function() {
        alert("Success");
    }
});

In my PHP file:

<?php
  $myArray = $_POST['kvcArray'];
  var_dump($myArray)
?>

I get a result of "null", any help appreciated.

Possible duplicate of [Serializing to JSON in jQuery](http://stackoverflow.com/questions/191881/serializing-to-json-in-jquery) — Rikin, Mar 15 '17 at 20:55
Look at your response to see what data you're transferring.$.ajax({ success: function(response){console.log(response);}); — Mark Bellamy, Mar 15 '17 at 21:07
@Xorifelse without the php, it returns in the alert box the html file. I also did that with alert(array) - this returns my array that i want inside my php — Bryant, Mar 15 '17 at 21:08
@Xorifelse i will try a separate folder and see what could influence the outcome. thanks — Bryant, Mar 15 '17 at 21:17
I still get null! after isolating to a different folder and two files... wtf — Bryant, Mar 15 '17 at 21:23
It is working fine on my system too. It is not clear to me what issue are you facing, can you clarify it a bit? I am getting `array(3) {...}` in the network response for checklist.php. — Samarth, Mar 16 '17 at 10:16

score 0 · Answer 1 · answered Mar 15 '17 at 21:52

Not sure if I misunderstood the question, but this works fine on my computer (it logs your array data):

--- index.php ---

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>

    <!-- Your list -->
    <ul id="alist">
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
    </ul>

    <!-- Your JS -->
    <script>
    var array = [];
    $("#alist li").each(function() {
        array.push($(this).text())
    });

    $.ajax({
        type: "POST",
        url: "checklist.php",
        data: { kvcArray : array},
        success: function(data) {
          console.log(data);
        }
    });
    </script>

  </body>
</html>

--- checklist.php ---

<?php print_r($_POST); ?>

This returns to me "Array ( )" and if i try it with a var_dump it gives me array(0) { }. I'm really confused as to why its different for me than everyone else... — Bryant, Mar 15 '17 at 22:27

score -1 · Answer 2 · answered Mar 15 '17 at 21:16

-1

I found a good example of passing values through the query string at http://webcheatsheet.com/php/passing_javascript_variables_php.php

<script type="text/javascript">

width = screen.width;
height = screen.height;

if (width > 0 && height >0) {
    window.location.href = "http://localhost/main.php?width=" + width + "&height=" + height;
} else 
    exit();

</script>

php

<?php
echo "<h1>Screen Resolution:</h1>";
echo "Width  : ".$_GET['width']."<br>";
echo "Height : ".$_GET['height']."<br>";
?>

answered Mar 15 '17 at 21:16

Mark Bellamy

135
1
10

Also this problem has several similar posts on stack overflow including this one for a Javascript post option http://stackoverflow.com/questions/15461786/pass-javascript-variable-to-php-via-ajax – Mark Bellamy Mar 15 '17 at 21:18

score -1 · Accepted Answer · answered Mar 16 '17 at 09:26

A straight forward way to do it is appending the values of your array to a hidden input field in a form.

Use jquery to grab the list values and push to an array
Convert the array into a string, ready for form submission
Add a hidden input to a form with an id and an empty value attribute
Append your string to this input field.
On submit of your post, on PHP you will be able to see your array as a string.
Convert back into array on the php side and presto!

You are welcome

Passing a JavaScript array to PHP

3 Answers3