Поля формы, добавленные через javascript, не передают данные
Не нашел такого вопроса, у меня есть форма с одним набором полей и добавление дополнительных, если пользователь нажимает кнопку. Я делаю эти поля такими же, как в первом наборе, и использую name='array[]' для всех наборов полей.
В любом случае, когда я отправляю форму с полями, сгенерированными javascript, вместе с исходными полями, передаются только значения в исходном наборе полей.
Это в codeigniter.
Я не могу передать весь код, но в pastebin есть сгенерированный html, и я вставлю биты php/javascript, относящиеся к этой проблеме.
<tr id = "add_dependents">
<td class = "tim-dependents-table-cell">
<?php $data = array('class' => 'tim-dependents-table-contents', 'name' => 'dependent_names[]', 'id' => 'dependent_names_1', 'value' => $dep_names[0]);
echo form_input($data);
?>
</td>
<td>
<?php $data = array('class' => 'tim-dependents-table-contents', 'name' => 'dependent_ssns[]', 'id' => 'dependent_ssns_1', 'value' => $dep_ssns[0]);
echo form_input($data);
?>
</td>
<td>
<?php $data = array('class' => 'tim-dependents-table-contents', 'type' => 'date', 'name' => 'dependent_dobs[]', 'id' => 'dependent_dobs_1', 'value' => $dep_dobs[0]);
echo form_input($data);
?>
</td>
<td>
<a href = "#" class = "red"><i class = "fa fa-trash"></i></a>
</td>
</tr>
Затем я создаю дополнительные поля, если пользователь нажимает кнопку, с помощью этой функции:
if (typeof count === 'undefined') {
var count = 2;
}
function insertDependent() {
$("#add_dependents").after("<tr id='dependents_row_" + count + "'>" +
"<td><input type='text' id='dependent_names_" + count + "' name='dependent_names[]' /></td>" +
"<td><input type='text' id='dependent_ssns_" + count + "' name='dependent_ssns[]'/></td>" +
"<td><input type='date' id='dependent_dobs_" + count + "' name='dependent_dobs[]'/></td>" +
"<td><a href='#' onclick='deleteRow(" + count + ")' class='red'><i class='fa fa-trash'></i></a></td>" +
"</tr>");
count++;
}
Эта часть работает и создает поля, которые выглядят так, как должны.
Затем код в контроллере, который принимает эти поля, в частности. Не делитесь всем кодом, который работает, только часть, которая не работает:
if (!empty($this->input->post('dependent_names'))) {
$data['dependent_names'] = $this->input->post('dependent_names');
$data['dependent_ssns'] = $this->input->post('dependent_ssns');
$data['dependent_dobs'] = $this->input->post('dependent_dobs');
}
Однако проблема находится на странице до того, как она попадет в контроллер. Полезная нагрузка от отправки страницы включает в себя «постоянный» набор полей, но не какие-либо данные в полях, сгенерированных javascript.
Что должно произойти, так это то, что поля, созданные с помощью javascript, должны быть представлены с данными, такими же, как «постоянный» набор полей.
Он отправляется через форму action = "controller/method" method = "post". Я тестировал форму много раз, она работает, делает то, что должна. Только эта часть не работает.
Я не уверен, что это причина проблемы, но идентификаторы элементов должны быть уникальными. Вы каждый раз создаете поля формы с одним и тем же идентификатором.
Да, верно. У меня они тоже генерировали разные, и это не сработало, поэтому я изменил их на одинаковые. Я вернусь к уникальным и посмотрю, изменится ли что-нибудь,
Да, следуя вышеизложенному, я просто изменил их обратно, где каждый идентификатор уникален, например, depend_names_1, depend_names_2 и т. д. Я оставлю это так, если это более правильно, но все равно не работает.
«поля, созданные с помощью javascript, не передают данные». Как вы это подтверждаете? Вы просматриваете опубликованные данные в сетевом инспекторе вашего браузера?
что я делаю, так это отправляю форму без некоторых необходимых данных, поэтому она отправляет обратно на страницу с данными. затем сбросить эту переменную на страницу. может быть немного неуклюжим, но это работает (обычно). Есть ли способ лучше?
Я предлагаю сделать то, что я сказал. Просмотр полезной нагрузки поста. Это скажет вам, действительно ли эти поля опубликованы. Если да, то проблема не в форме, а в том, что вы делаете с данными на сервере.
Получил это, используя инструменты разработчика Chrome, нашел заголовки. Показывает первый набор полей, но не данные в полях, сгенерированных с помощью javascript.
Вы уверены, что добавленные элементы включены в форму? Я имею в виду, помещенный между <form>...</form>
Да, они включены между тегами формы.
Почему у вас несколько циклов, а не просто $dependent_names = $this->input->post('dependent_names') ???
Если браузер не отправляет значения этих элементов, они не находятся в форме, как сказал @CharlesEF, или вы выполняете какую-то отправку формы JS, которая не учитывает все элементы формы.
Вы правы, в данном случае это работает. Я не помню, почему я так поступил. Я изменю это выше. Спасибо
Но это не решает проблему выше.
Это отправка php, действие и переход к контроллеру/методу. И да, поля находятся внутри тегов формы.
Как ни странно, когда я просматриваю исходный код, закрывающий тег формы находится в нужном месте. Когда я использую раздел «Элементы» chrome dev tools, он показывает, что он закрывается близко к верхней части формы. Для меня это не имеет смысла, и, как я уже сказал, форма работает, а вот эти добавленные поля — нет.
Над добавленными полями и под добавленными полями есть поля, которые работают правильно.
похоже, вы пропустили большую часть кода, и я понимаю, почему. однако у меня есть ощущение, что ваша проблема находится в этих опущенных разделах. если бы вы могли упростить код, удаляя зависимости .etc. и опубликуйте полный html-код на pastebin или на том, что у вас есть (достаточно для запуска в наших системах), чтобы мы могли диагностировать проблему. иначе это просто игра в догадки.
ОК, я создал pastebin со сгенерированным исходным кодом страницы. pastebin.com/a5PeN73s . Надеюсь, это поможет.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ну, я понял это. У меня был тег открывающей формы, вложенный таким образом, что некоторые элементы div открывались перед ним и закрывались после него.
Другими словами, у меня было это:
<div>
<form action = "" etc>
</div>
</form>
Я переместил тег формы выше на странице, например:
<form action = "" etc>
<div>
</div>
</form>
Забавно, что все заработало, кроме полей javascript. Я собираюсь удалить PHP и codeigniter, так как это прямая проблема с javascript, и я надеюсь, что какой-нибудь эксперт сможет объяснить.
Рад, что теперь это работает, но я до сих пор не знаю более глубокого «почему».
Спасибо комментаторам, которые пытались помочь.
Как подается форма?