How to pass Array from Javascript to PHP

Question

I have a function which saves an array each time the button is clicked to localStorage.The button will be clicked multiple times and I need to put this Array list into PHP somehow which is on another page from this file.

Thanks

a.js (this function listens onLoad of the page)

 function doFirst(){
 var button = document.getElementById("button");
 button.addEventListener("click", save, false);
 var buttons = document.getElementById("clear");
 buttons.addEventListener("click", clear, false);
 var buttonss = document.getElementById("submittodb");
 buttonss.addEventListener("click", toPHP, false);
 $.ajax({
 method: 'post',
 dataType: 'json',
 url: 'edit.php',
 data: { items: oldItems }, //NOTE THIS LINE, it's QUITE important
 success: function() {//some code to handle successful upload, if needed
 }
 });
 }
 function save(){
 var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
 var newItem = {
 'num': document.getElementById("num").value,
 'methv': document.getElementById("methv").value,
 'q1': document.getElementById("q1").value,
 'q2':document.getElementById("q2").value,
 'q3':document.getElementById("q3").value,
 'q4':document.getElementById("q4").value,
 'comm':document.getElementById("comm").value,
 };
 oldItems.push(newItem);
 localStorage.setItem('itemsArray', JSON.stringify(oldItems));}
edit.php
$parsed_array = json_decode($_POST['items']);
and i get the error: Notice: Undefined index: items in /home/project/edit.php on line 9

• David L: Why not make a post to the server which you then use to render the new page?
• Nick Pickering: POST the data to a PHP script using AJAX.
• War10ck: If you are changing pages, then you can simply post the data to the server and render the new page. If you want to stay on the same page then and still post the data to the server, then your best bet is to use ajax.
• user2162768: @NicholasPickering could you put an example please cause im pretty new to javascript and AJAX
• Nick Pickering: You need to learn AJAX to do what you want: w3schools.com/ajax/default.asp

Answer 1

In order to pass this array to PHP you need to:

1. JSon-encode it
2. Make an AJAX or POST request to PHP
3. Parse the passed array into PHP array

If you're using jQuery (if you're not you should start - it is really handy tool) steps (1) and (2) is as simple as

$.ajax({
 method: 'post',
 dataType: 'json',
 url: 'the URL of PHP page that will handle the request',
 data: { items: oldItems }, //NOTE THIS LINE, it's QUITE important
 success: function() {//some code to handle successful upload, if needed
 }
});

In PHP you can parse the passed array with just

$parsed_array = json_decode($_POST['items']);

There is a direct connection between { items: oldItems } and $_POST['items']. The name of variable you give to the parameter in javascript call will be the name of key in $_POST array where it ends up. So if you just use data: oldItems in javascript you'll have all your entities scattered around the $_POST array.

More on $.ajax, and json_decode for reference.

• user2162768: where do i declare this stuff in the js file or in the php file that i want it to appear? (im new to all this stuff)
• J0HN: $.ajax goes to javascript file. $parsed_array = json_decode($_POST['items']); - to the file that will respond to the url you've set in the $.ajax call. Spend some time reading about AJAX, it's not as hard as it may look like.
• user2162768: Hey man i just tried it and i get a undefined index... any ideas?
• J0HN: Update the answer with the code you use and the error you get. I've got no psychic powers, you know :)
• user2162768: UPDATE: Ive read the console log and it says json_decode() expects parameter 1 to be string, array given

Answer 2

You can create an AJAX function (use jQuery) and send the JSON data to the server and then manage it using a PHP function/method.

Basically, you need to send the data from the client (browser) back to the server where the database hosted.

• user2162768: Im pretty new to AJAX and JQuery and dont know how to declare it in a .js file

Answer 3

1. Call JSON.stringify(oldItems); to create the json string

2. Do a Do a POST request using AJAX.

Probably the simplest way is using jQuery:

$.post('http://server.com/url.php', { items: JSON.stringify(oldItems) }, function(response) {
 // it worked.
});

• user2162768: how do i declare JQuery in my .js file (never used it before sorry!)
• Yogu: Download it here and include it in your html file.
• user2162768: Thanks man i will try it out now =] P.S the JSON.stringify i put in the js file and the $.post i put in my html file?
• War10ck: If you would prefer not to have to download it and host it yourself you can use the Google CDN. Place <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> in the head of your html file.
• Yogu: No, everything is javascript. I already embedded the JSON.stringify in the code sample.