How do I retrieve an array of data passed from Javascript in PHP?

Question

I have a Javascript function to pass an array of data to a PHP file. My Javascript creates a form on the fly as follows

function SaveFileToDisk(filename)
{
    var ssForm = document.createElement("form");
    ssForm.method="post" ;
    ssForm.action = "saveScenario.php" ;
    ssForm.target = "hiddenSaveScenarioStatusFrame";

    for (var i = 0; i < ScriptSteps.length; i++)
    {
        var ssInput = document.createElement("input");
        ssInput.setAttribute("filename", filename);
        ssInput.setAttribute("timestamp", ScriptSteps[i].timestamp);
        ssInput.setAttribute("lhsName", ScriptSteps[i].lhsName);
        ssInput.setAttribute("lhsPort", ScriptSteps[i].lhsPort);
        ssInput.setAttribute("lhsBandwidth", ScriptSteps[i].lhsBandwidth);
        ssInput.setAttribute("lhsDelayMin", ScriptSteps[i].lhsDelayMin);
        ssInput.setAttribute("lhsDelayMax", ScriptSteps[i].lhsDelayMax);
        ssInput.setAttribute("lhsDropLoss", ScriptSteps[i].lhsDropLoss);
        ssInput.setAttribute("lhsFilters", ScriptSteps[i].lhsFilters);
        ssInput.setAttribute("lhsDefaultFilter", ScriptSteps[i].lhsDefaultFilter);
        ssInput.setAttribute("rhsName", ScriptSteps[i].rhsName);
        ssInput.setAttribute("rhsPort", ScriptSteps[i].rhsPort);
        ssInput.setAttribute("rhsBandwidth", ScriptSteps[i].rhsBandwidth);
        ssInput.setAttribute("rhsDelayMin", ScriptSteps[i].rhsDelayMin);
        ssInput.setAttribute("rhsDelayMax", ScriptSteps[i].rhsDelayMax);
        ssInput.setAttribute("rhsDropLoss", ScriptSteps[i].rhsDropLoss);
        ssInput.setAttribute("rhsFilters", ScriptSteps[i].rhsFilters);
        ssInput.setAttribute("rhsDefaultFilter", ScriptSteps[i].rhsDefaultFilter);
        ssForm.appendChild(ssInput) ;
    }
    document.body.appendChild(ssForm) ;
    ssForm.submit() ;
    document.body.removeChild(ssForm) ; 
}

But when I write my PHP script I was expecting to find the array in the $_POST variable and thought that I would get each element of the array containing the above fields and corresponding data. When I look at the size of the $_POST array in the PHP script it comes out as zero. What am I doing wrong or am I using the wrong method for doing this sort of thing.

As an aside, I really only need to pass the filename over once but thought the easiest way was to pass it over with every element of the array. Is there a better way so that the filename is passed once and the remaining fields passed for each "step"? Have trawled the web for ideas on passing arrays of data from Javascript to PHP - there seem to be so many ways, one of them being the way I have tried, but does not explain retrieving the data on the PHP side.

thanks in advance

Andy

score 1 · Answer 1 · edited May 23 '17 at 11:47

1

In fact you are only creating one single inupt-field and assign a bunch of freaky attributes to it (like "lhsName", what is that? It's not HTML). Please look at the resulting HTML. You need one input per variable.

On the other hand, the whole approach is weird. Why don't you just call the script and post all the variables in as JSON-encoded-data?

See also

edited May 23 '17 at 11:47

Community

1
1

answered Aug 02 '11 at 10:20

feeela

29,399
7
59
71

My array is an array of objects, each object containing that set of "freaky attributes" - the array could be quite large, so I am just looking for the best way to pass that data. From your comments, maybe I've selected the wrong way to do this. Would welcome a suggestion on how to pass such a large array of data to the php script. – Andy Gardner Aug 02 '11 at 10:28
"Would welcome a suggestion on how to…" Please look at the provided links, as they are full of AJAX-examples – feeela Aug 02 '11 at 10:30

score 1 · Answer 2 · answered Aug 02 '11 at 10:23

1

Custom attributes of input elements are not passed into $_POST. Only "value" attribute is passed. Probably you want a bunch of "hidden" elements: <input type="hidden" name="..." value="..." /> They will also be "passed for each step" as you wish.

answered Aug 02 '11 at 10:23

scaryzet

923
4
9

VolkerK · Answer 3 · 2011-08-02T11:01:32.890

http://www.w3.org/TR/html401/interact/forms.html#submit-format says:

17.13.2 Successful controls
A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set.

And the control name is defined as

A control's "control name" is given by its name attribute.

Your input element has no name attribute and no type (and no value).
You'd need something more like

for (var i = 0; i < ScriptSteps.length; i++)
{
    var ssInput;
    ssInput = document.createElement("input");
    ssInput.setAttribute("type", "hidden");
    ssInput.setAttribute("name", "x["+i+"][timestamp]");
    ssInput.value = ScriptSteps[i].timestamp;
    ssForm.appendChild(ssInput) ;

    ssInput.setAttribute("lhsName", );
    ssInput = document.createElement("input");
    ssInput.setAttribute("type", "hidden");
    ssInput.setAttribute("name", "x["+i+"][lhsName]");
    ssInput.value = ScriptSteps[i].lhsName;
    ssForm.appendChild(ssInput);

But you don't necessarily have to create a form element and then submit that form in order to transfer key=value pairs (or any other string) to the server. You might be interested in something like e.g. jQuery.ajax instead.

score 0 · Answer 4 · answered Aug 02 '11 at 10:24

I'm not a PHP guy but from the script side you're definitely creating one input and assigning attributes to that input. You're not specifying the type for the input either, which I'm a bit surprised isn't causing you additional issues.

When you submit a form, you get a value per input. If you want to submit 20 values, you either need one form field to which you can serialize your parameters/state collection, or you must create a form field per parameter and submit the collection.

Again, while I'm not a PHP guy, I'm pretty certain that on the server side you'll get each input you submit - so again, if you're creating one input here, I'd expect you're getting an array on the server side with a single value in it, and that value is an empty string or NULL (again, not a PHP guy) because you never give ssInput a real value (value='x'). If you're not getting even a single entry on the server side with respect to variables submitted, try adding this line to your javascript right below your document.createElement("INPUT") line:

ssInput.setAttribute("type", "hidden");

Good luck!

B

How do I retrieve an array of data passed from Javascript in PHP?

4 Answers4