How can I submit an HTML form array using javascript
I'm sending data from a form with a variable number of fields via an Ajax call. Some of the fields are grouped together so I have opted to send them as an array of JSON objects to keep the groupings, but there are a number of ways of doing this. For client-side, is it better to read the form as JavaScript objects and stringify them or just directly work with strings from the start?
To submit HTML form array -
First of all, I'd make sure that supporting IE7 is actually required. It's a really old browser by now, and there are a lot of things that are much more difficult to do.
Anyway, as for sending multiple form values, there's a common - but informal - way of doing that without JSON. It's supported by some server-side languages/frameworks (notably PHP, where I think it started), so it might work for you.
It's all about naming your inputs using square brackets to namespace them.
Typically - again, this isn't a true standard, just an informal one - you would use a name like foo[bar] to specify that bar is a named sub-property of foo. Or you'd use the name foo[] multiple times to indicate that foo is an array (but this only works for plain value arrays).
Here, you need a little of both, something like this (I've skipped a lot of HTML just to make it clearer):
E.g. what gets sent to the server would be something like:
group_name=SomeGroup
members[0][name]=Alice
members[0][date]=01/01/2015
members[1][name]=Bob
members[1][date]=02/01/2015
members[2][name]=Carol
members[2][date]=03/01/2015
This is roughly equivalent to a JSON structure like:
{
"group_name": "SomeGroup",
"members": [
{
"name": "Alice",
"date": "01/01/2015"
},
{
"name": "Bob",
"date": "02/01/2015"
},
{
"name": "Carol",
"date": "03/01/2015"
},
]
}
Again, I can't guarantee how your server will understand it, but it's a common way to do things.
Even if your server-side code doesn't understand it automagically, it's still parseable; you just have to write a bit more code yourself.
The trick is of course to increment the number, when you add new fields. That can be done in many ways, though.
Alternatively, you simply name all your fields the same:
The browser will send all the values, but usually the server-side software has a rule for how to handle duplicate names, and keeps only the first or last one it sees. But again, you can access the raw request data, and parse it yourself, if you want. But there's a lot of work in doing that.
On a side-note: I'd avoid having duplication between the javascript and the HTML (right now, the page starts out with 1 set of member inputs in the HTML, and the rest get added using a string in the JavaScript. That means you have to keep both of them identical in order for things to work - not great.