Add more (sets of) fields to form by jQuery - php

Question

It is easy to add more fields to a html form by jQuery. Then, we can serialize the fields, if the have the same name but what if we have a set of fields? For example
<input type="text" name="movie1_name" />
<input type="text" name="movie1_director" />
<input type="text" name="movie1_year" />
Now I want to add a new set of fields by jQuery as
<input type="text" name="movie2_name" />
<input type="text" name="movie2_director" />
<input type="text" name="movie2_year" />
and so forth. I process the form with PHP to insert movies into mysql database with three columns of (name, director, year). In the above-mentioned example, it is hard to serialize the fields to create appropriate $_POST arrays. How should I serialize jquery-added sets of movies?

Answer 1

<input type="text" name="movie_name[]" />
<input type="text" name="movie_director[]" />
<input type="text" name="movie_year[]" />
<input type="text" name="movie_name[]" />
<input type="text" name="movie_director[]" />
<input type="text" name="movie_year[]" />
Nothing else. On the server you will get (in case of POST) array in $_POST['movie_name'], $_POST['movie_director'] and $_POST['movie_year'];. Elements with the same index are from the same set of inputs.
What kind of problem with serialization do you have?
<form>
<input type="text" name="movie_name[]" />
<input type="text" name="movie_director[]" />
<input type="text" name="movie_year[]" />
<hr />
<input type="text" name="movie_name[]" />
<input type="text" name="movie_director[]" />
<input type="text" name="movie_year[]" />
<br />
<input type='button' id='serialize' value='Click me' />
</form>
and js code:
$('#serialize').click(function(){
alert($('form').serialize());
});
when you want to submit the data just write
$.post('script.php', $('form').serialize(), function() {alert('Saved');});
ps: if you are afraid to lose something, just compare count($_POST['movie_name']), count($_POST['movie_director']) and count($_POST['movie_year']).
or you can add indexes
<input type="text" name="movie_name[0]" />
<input type="text" name="movie_director[0]" />
<input type="text" name="movie_year[0]" />
<input type="text" name="movie_name[1]" />
<input type="text" name="movie_director[1]" />
<input type="text" name="movie_year[1]" />

Answer 2

Based on useful discussion with Cheery, I came to conclusion that the best and safest way is to use
<input type="text" name="movie_name[i]" />
<input type="text" name="movie_director[i]" />
<input type="text" name="movie_year[i]" />
where we define each i with jQuery to serialize the fields SAFELY. This way, we can be sure that serialized arrays are parallel and well matched, without misplacing.

Answer 3

You can do something like this:
<input type="text" name="movie1_name" />
<input type="text" name="movie1_director" />
<input type="text" name="movie1_year" />
// OTHER:
<input type="text" name="movie2_name" />
<input type="text" name="movie2_director" />
<input type="text" name="movie2_year" />
And do this to all... In Jquery, you create a function that create field as needed... I'm not the best in JQuery so I can't help you for this but the way I told you worked fine for me with PHP...