How to send Javascript/jQuery array over URL paramter to PHP? - php

Question

Here's my script, this works fine... send_array_to_other_page.html
$(function(){
//DECLARE ARRAY
var arr = new Array();
var i = 0;
$('#form').submit(function(e){
e.preventDefault();
var value = $('#box').val();
var index = arr.length;
var list = '';
//ADD VALUE TO ARRAY
arr[index] = value;
//OUTPUT VALUES IN ARRAY
for (var index in arr){
list+=index+': '+arr[index]+'<br/>';
$('#arrLength').html(arr.length);
}
//DISPLAY ARRAY
$('#display').html(list);
$('#form').get(0).reset(); //RESET FORM
});
$('#submit').click(function(){
window.location = 'send_array_to_other_page_2.php?list='+arr;
});
});
This doesn't. It outputs Array content lost. Id also like to point out the the url of this page is send_array_to_other_page_2.php. Its missing the ?list=
<?php
$arr = $_GET['list'];
echo 'The contents of the array are still... <br/>';
if(isset($arr)){
print_r($arr);
} else {
echo 'Array content lost';
}
?>

Answer 1

$(function(){
//DECLARE ARRAY
arr = new Array();
var i = 0;
$('#form').submit(function(e){
e.preventDefault();
var value = $('#box').val();
var index = arr.length;
var list = '';
//ADD VALUE TO ARRAY
arr[index] = value;
//OUTPUT VALUES IN ARRAY
for (var index in arr){
list+=index+': '+arr[index]+'<br/>';
$('#arrLength').html(arr.length);
}
//DISPLAY ARRAY
$('#display').html(list);
$('#form').get(0).reset(); //RESET FORM
});
$('#submit').click(function(){
window.location = 'send_array_to_other_page_2.php?list='+arr;
});
});
Try without the var arr to make it global, I don't believe the sub functions are parsing it.

Answer 2

Don't sent 'long' data over a URL. Most browsers have a length limit and it's very easy to exceed that and end up with corrupted data. For 'big' data, use a POST, which is not limited.
To send the array itself, just do an AJAX request and let jquery encode the array into JSON. You then handle it in PHP with json_decode() and you'll end up with a native PHP array.

Answer 3

Edit: Updated the JavaScript on jsfiddle based on your comment. On "submit", the array is saved at the "#form" element using the .data() method. On "click" of the "#submit" button, that data is retrieved and the url is build up.
The click event does fire before the submit event (at least in my Firefox 7), so your array is empty when concatenated to the URL string.
I put together some JavaScript on jsfiddle that might help. You do not really need to bind to the click event of the submit-button, just do the "redirect" in the submit handler function. You are building your string list there anyways. So there would no confusion what fires first, the click or the form submit event.
As for the serialization of your array, I used jQuery's .each() function but there is nothing wrong doing it by hand (if done correctly).
I could also imagine that the form is actually posted and this is why you do not see the "?list" search part of the URL.
If you don't need a complete redirect, why don't you send the data using jQuery.get()?