Is it possible to submit JavaScript array along with form submission?

Question

I would like to create a list-like form for a web application. Elements are added to, modified 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 that I can add data into, click an "Add" button, and the data is added to both the DOM (so the user can see it, and remove it by clicking a "Remove" button) and to a JavaScript array that will be submitted along with the larger form. I do not want any traffic to the web application until the list is built.

Is this doable? My HTML is a bit rusty and I haven't kept on top of the latest JS libraries. Are there frameworks you would recommend for accomplishing this, with code samples?

Answer 1

Sure you can do this.

I can think of a number of ways. One is to create a variable that stores the list items in an array. As you interact with the list items in the UI, you can also updated the array.

Upon click of the SUBMIT button, stick the array into a hidden INPUT for sending back to the server.

That said...if things are being created/hidden on the fly in the UI, a person might expect that to be updating the server real-time via AJAX. So make sure your UI design clearly shows that it won't be updated UNTIL a user performs the SAVE action.

As for a framework, the defacto answer would be jQuery.

Answer 2

Probably the easiest way to do this would be to put the array of values into a JSON object, and then embed that object as a string value into a hidden element on the form.

Then in the server-side code in which you process the form, you should be able to decode the JSON object pretty easily. For instance, in PHP, this is a simple process of calling json_decode().