Я прочитал много дискуссий на эту тему. (включая « Отправить поля ввода формы, добавленные с помощью javascript », что в итоге привело меня на правильный путь.) Однако никто из них не полностью ответил на вопрос и не исправил мою проблему, поэтому я решил сделать пост мое решение.
Я пытался динамически добавить дополнительные поля ввода текста в форму, используя jQuery, с помощью следующего кода:
jQuery("#form_table").append(
'<tr><th>'+
'<label><b>Date: </b></label></th><td>'+
'<input type="text" id="extra_date'+counter+'" />'+
'<label><b>Time: </b></label>'+
'<input type="text" id="extra_time'+counter+'" /></td></tr>');
Текстовые поля были добавлены в таблицу в форме, и когда я исследовал DOM с помощью firebug, они были там. Однако когда я отправил форму, переменные extra_date1 / extra_time1 не были в массиве $ _POST. Я обнаружил, что этот код не добавляет элементы в саму форму. Вышеупомянутый пост указал мне в правильном направлении, используя JS, а не jQuery. Я попытался отправить в форму, как они упоминали в этом сообщении, но это не сработало. В конце концов, этот код работал для меня:
var theForm = document.getElementById("form_table");
var newOption = document.createElement("input");
newOption.name = "extra_date"+counter;
newOption.type = "text";
theForm.appendChild(newOption);
var newOption = document.createElement("input");
newOption.name = "extra_time"+counter;
newOption.type = "text";
theForm.appendChild(newOption);
Элемент form_table является табличным тегом внутри тега формы. В отличие от кода из поста выше, я обнаружил, что вы не можете просто добавить его к самому элементу формы. Это должен быть элемент в форме.
Я знаю, что это кажется очень простым, но похоже, что многие люди в сети сталкивались с такой же проблемой, поэтому я надеюсь, что это будет кратким ответом для человека, который тянет свои волосы, как я.