How to send Javascript/jQuery array over URL paramter to 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';
    }
?>

I tried $arr = $_SERVER['QUERY_STRING'], it did not display 'Array content lost' but it also did not output the content of the array, only blank. — JohnSmith, Sep 29 '11 at 15:03

score 1 · Answer 1 · answered Sep 29 '11 at 14:54

1

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.

answered Sep 29 '11 at 14:54

Marc B

356,200
43
426
500

Hi. Im not too familiar with JSON. The only JSON Im able to do was from PHP to JS and not the other way around. How do I encode a jQuery array to JSON? – JohnSmith Sep 29 '11 at 15:06
http://stackoverflow.com/questions/191881/serializing-to-json-in-jquery. JSON basically boils down to raw javascript code for defining variables' values. If you have `var x = [1,2,3]`, then the `[1,2,3]` portion is what gets encoded into json format, and would actually look almost identical. – Marc B Sep 29 '11 at 15:08

score 1 · Accepted Answer · answered Sep 29 '11 at 15:37

$(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.

It works now, the content is being displayed in PHP but as a string not an array. I tried this foreach( $arr as $index => $value){ echo 'Index '.$index.' has value '.$value; } and Im getting an error that the for each() has an invalid argument — JohnSmith, Sep 30 '11 at 01:06
Because $arr will only be a string. If you're doing .php?list='foobar' and you're asking for $_GET['list'] then you've already stated what the index is. — joedborg, Sep 30 '11 at 08:27

Wolfram · Answer 3 · 2011-09-30T14:53:55.477

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

Im sorry if it caused any confusion but the $('#submit') is not actually a submit button type. Its only a button with an id 'submit'. I actually need to redirect to the PHP page. — JohnSmith, Sep 30 '11 at 01:07

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

3 Answers3