Submit an array as an HTML form value using JavaScript
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):



&lt;form id="form"&gt;
    &lt;input type="text" name="group_name"&gt;

    &lt;div id="dynamic_form"&gt;
        &lt;input type="text" name="members[0][name]"&gt;
        &lt;input type="text" name="members[0][date]"&gt;

        &lt;input type="text" name="members[1][name]"&gt;
        &lt;input type="text" name="members[1][date]"&gt;

        &lt;input type="text" name="members[2][name]"&gt;
        &lt;input type="text" name="members[2][date]"&gt;
    &lt;/div&gt;
&lt;/form&gt;


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 that 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:

&lt;input type="text" name="name"&gt;
&lt;input type="text" name="date"&gt;
&lt;input type="text" name="name"&gt;
&lt;input type="text" name="date"&gt;
&lt;input type="text" name="name"&gt;
&lt;input type="text" name="date"&gt;


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.