Is it possible to submit a JavaScript array along with submitting a form?

Question

I would like to create a list-like form for a web application. Elements are added, changed and removed from the list, and the user clicks "Submit" to send the list to the web application for further processing.

I would like to have two INPUT fields into which I can add data, click the Add button, and the data will be added to the DOM (so that the user can see and delete it by clicking the Delete button) and a JavaScript array to be sent together with a larger shape. I do not want web application traffic until a list is created.

Is this doable? My HTML is a bit rusty and I did not support the latest JS libraries. Are there any frameworks that you would recommend for this with code samples?

Answer 1

Of course you can do it.

I can think of several ways. One of them is to create a variable that stores list items in an array. When you interact with list items in the user interface, you can also update the array.

After pressing the SUBMIT button, insert the array into the hidden INPUT to send back to the server.

However ... if things are created / hidden on the fly in the user interface, a person can expect him to update the server in real time via AJAX. Therefore, make sure your user interface design clearly shows that it will not be updated. If the user does not complete the SAVE action.

As for the framework, defacto's answer would be jQuery.

Answer 2

Probably the easiest way to do this is to put an array of values ​​in a JSON object, and then insert this object as a string value into a hidden form element.

Then, in the server code in which you are processing the form, you should easily decode the JSON object. For example, in PHP, this is a simple process for calling json_decode() .