Option 1
You can create a single JS object containing all your data (your form data and your hierarchical array).
Afterwards, you can send that using jQuery .ajax()
method or .post()
method.
Querying form inputs using jquery
var formValues = {
nameField1: $(field1Selector).val(),
nameField2: $(field2Selector).val(),
//(...) the remaining fields
//variable holding your array
arrangement: dragAndDropArray
};
Then, you can send that request to the server by
$.ajax({
url: actionUrl,
method: 'POST',
data: formValues //here you're setting the payload of your POST request
});
here’s the documentation for the .ajax() method
Option 2
Another option is to create a hidden input field inside your form, and set its value to the JSON string of your JS array.
Adding a hidden field to your form like
<input type="hidden" id="hierarchical-array-input" name="hierarchivalArr" />
Then, every time you update your array, you want to set the value of the hidden input like so:
$('#hierarchical-array-input').val(JSON.stringify(hierarchicalArr));
You need to handle the values in your PHP on both cases. I suggest you try it out and debug how the PHP is parsing the data.
Note
You can also use the first method with a plugin that queries the form and generates a JS object for you. Like,
1
solved Pass JSON string via POST to PHP [closed]