Hidden Input Doesn't Change Serverside When Updated in the Client

I am trying to set the hidden input in the javascript but it doesn’t set it in the php.

This is the form with the hidden input. It corresponds to a field in the database table with the name of draggables.


<form method="post" accept-charset="utf-8" id="myForm2" action="/mealplans/add">

<input type="hidden" name="draggables" id="drag12"/>

<button id="myId" type="submit">Submit Form</button>

</form>

This is where I change the value in the javascript:

if(data == "draggable3"){
alert("data " + data);
var x = document.getElementById("drag12").value;
x =  "draggable3";
alert(x);
} //end if

The alert pops up with draggable3 as it should but the value of null is what gets saved in the database. The javascript doesn’t change the PHP value; it only changes the client side value.

I’ve also tried getElementsByName but that didn’t work either.
var y = document.getElementsByName("draggables").value; //only changes it on the client

This is actually a cakephp site but this problem is with the PHP so I am publishing it here.

is not setting document.getElementById(“drag12”).value to “draggable3”. It’s just setting x to “draggable3”.

I changed it to document.getElementsByName(“draggables”).value = “draggable3”; and didn’t use the x or y variable names for the alert and it still didn’t update server side.

I found code that works:

var z = $("#drag12").val("draggable3");

updates the field in the table with draggable3

Now I’m trying to push the z element to an array but the following code doesn’t work. The code adds the last z that was selected to the database instead of adding an array of zs.

var draggables = [];

if(data == "draggable3"){
alert("data " + data);
var z = $("#draggable3").val("draggable3");
draggables.push(z);
} //end if

if(data == "draggable4"){
alert("data " + data);
var z = $("#draggable4").val("draggable4");
draggables.push(z);
} //end if

var z = $("#draggable4").val("draggable4"); is an object. If I do alert(z), it shows [object Object].

This only works for the hidden input with the id of draggable4 because that is the last input with the name draggables.

The name of the hidden input is the name of the field in the database and so in cakephp it automatically saves the field name/input name to the database when the form is submitted so maybe this is a question for a cakephp forum and not a plain php forum.

How are you submitting the data? I think perhaps its a fundamental misunderstanding of what you’re editing with javascript, more than anything to do with php.

I don’t need to change the value of the hidden input after all. I just need to submit an array with the ids like follows to the database.

var draggables = [];
draggables.push("draggable3");
draggables.push("draggable4");

and the following alert responds with draggable3, draggable4 as it should
alert(draggables);

But draggables is a javascript array and I need the PHP array in order to submit it to the database. How can I get the clientside variable on the server side?

Two options
1 JSON encode the object and then decode it in php or
2 Assuming that the data are strings comma separate the strings and then parse it in php
If you expect commas use any other character to separate the strings or use a double or treble comma.

Thanks, dennisjn. I ended up saving the array as a cookie to communicate between the javascript and the PHP.