Добавить больше (наборов) полей для формирования с помощью jQuery

Question

С помощью jQuery легко добавить больше полей в html-форму. Затем мы можем сериализовать поля, если они имеют одинаковые значения name, но что если у нас есть набор полей? Например

<input type="text" name="movie1_name" />
<input type="text" name="movie1_director" />
<input type="text" name="movie1_year" />

Теперь я хочу добавить новый набор полей с помощью jQuery как

<input type="text" name="movie2_name" />
<input type="text" name="movie2_director" />
<input type="text" name="movie2_year" />

и так далее. Я обрабатываю форму с помощью PHP, чтобы вставить фильмы в базу данных mysql с тремя столбцами (имя, директор, год). В приведенном выше примере сложно сериализовать поля для создания соответствующих массивов $ _POST. Как я должен сериализовать наборы фильмов с добавлением jquery?

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[]" />

Ничего другого. На сервере вы получите (в случае POST) массив в $ _POST ['movie_name'], $ _POST ['movie_director'] и $ _POST ['movie_year'] ;. Элементы с одинаковым индексом относятся к одному и тому же набору входных данных.

Какие у вас проблемы с сериализацией?

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

и код JS:

$('#serialize').click(function(){
    alert($('form').serialize()); 
});

когда вы хотите отправить данные, просто напишите

 $.post('script.php', $('form').serialize(), function() {alert('Saved');}); 

ps: если вы боитесь что-то потерять, просто сравните count ($ _ POST ['movie_name']), count ($ _ POST ['movie_director']) и count ($ _ POST ['movie_year']).

или вы можете добавить индексы

   <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

Основываясь на полезном обсуждении с Cheery, я пришел к выводу, что лучший и самый безопасный способ - использовать

<input type="text" name="movie_name[i]" />
<input type="text" name="movie_director[i]" />
<input type="text" name="movie_year[i]" />

, где мы определяем каждый i с помощью jQuery для сериализации полей БЕЗОПАСНО.Таким образом, мы можем быть уверены, что сериализованные массивы параллельны и хорошо согласованы, без смещений.

Answer 3

Вы можете сделать что-то вроде этого:

<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" />

И делайте это со всеми ... В Jquery вы создаете функцию, которая создает поле по мере необходимости ... Я не лучший в JQuery, поэтому я не могу помочь вам в этом, но, как я вам говорил, работал хорошо для меня с PHP ...