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

[makamo66]

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.

[maxxd]

You haven't set a value for the drag12 element, so there's nothing for the JS to get.

[makamo66]

I found code that works:

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

updates the field in the table with draggable3

[makamo66]

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

 

[makamo66]

var z = $("#draggable4").val("draggable4");

is an object. If I do alert(z), it shows [object Object].

[makamo66]

Correction: Nothing is getting added to the database. The value was being set in the hidden input tags before and I didn't realize that so I thought it was being pushed to the array but the value was actually hard-coded in the input tag.

[makamo66]

None of this works for more than one hidden input because the name is what gets saved to the database and the hidden input can't have several names with the same value. I can't do

<input type="hidden" name="draggables" id="draggable3" multiple="multiple" value=""/>
<input type="hidden" name="draggables" id="draggable4" multiple="multiple" value=""/>
<input type="hidden" name="draggables" id="draggable5" multiple="multiple" value=""/>

because the name is repeated. CakePHP saves the input name to the database with the same field name so I guess this belongs in a CakePHP forum after all. 

[makamo66]

The array push isn't working but my last two posts are incorrect and there is no option to delete them. The database is being updated with the last value that gets set for the hidden input after all so it's not true that the value was hard coded in the input array. Also, using the same name for multiple hidden inputs works in cakePHP after all so that was incorrect as well. 

[makamo66]

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

[makamo66]

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.

[kicken]

PHP will create an array of the posted values if your name ends with [].

<input type="hidden" name="draggables[]" id="draggable3">
<input type="hidden" name="draggables[]" id="draggable4">
<input type="hidden" name="draggables[]" id="draggable5">

In your PHP code you can then take that array of values and do whatever you need to with it.

13 hours ago, makamo66 said:

This is where I change the value in the javascript:

The reason your "change" didn't work in the original code is because you only changed the value of the variable x, not the value of the actual input element.  Assigning the value to x doesn't link the two, it makes a copy.  Changing the copy doesn't change the original.  To change the value of the input, you need to assign a new value to the element's .value property.

document.getElementById("drag12").value = "draggable3"

 

[makamo66]

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?

[makamo66]

I've tried ending the names with square brackets to make them into arrays but this doesn't work in CakePHP. My form simply does not submit if I include the square brackets.

[maxxd]

There's probably a Cake-specific method of creating form fields with an array-enabled name, but I don't have the slightest notion what it would be.

To answer your other question, you'll need to submit the form data. Whether you do it via AJAX or a traditional HTML submit doesn't matter - send the data to the PHP script and process it there.

I'm not going to lie, given what you've described I'm hard-pressed to believe that what you're doing is actually what you want to do, but then again I don't know your project.

[makamo66]

Why would submitting the form change anything? There is nothing in my $_POST variables upon submission. In CakePHP $_POST would be

$this->request->getData('draggables') 

but this is empty as well. 

[maxxd]

You get the data to the server by submitting the form. You can do it traditionally or via AJAX, but either way the data has to be submitted to get to the PHP. I don't know cake, but if you normally get the request data via $this->request->getData() but it's empty in this case then something's wrong elsewhere.