Клонирование JavaScript-форм
Я пытаюсь клонировать простую форму «директора / члены». Когда я нажимаю кнопку «Добавить член», он клонирует все формы, но не стирает поле почтового индекса. Кроме того, когда я отправляю форму, она не передает первые два поля клонированных форм. Он принимает значения имени и фамилии и присваивает его адресу, городу и т. Д. Итак, для подведения итогов он не отправляет два поля, и я думаю, что поля состояния и почтового индекса клонированных форм доставляют мне проблемы, но Я не понимаю почему.
$y=0; $clone=1; do{ ?>
<div id="<?php echo "clonedSection$clone"; ?>" class="clonedSection" >
<p style="margin-left:350px; font-size: 14px;"><label id="<?php echo "member_label$clone"; ?>" > <?php echo "Director / Member $clone"; ?></label> </p><br><br>
<p style="margin-left:370px;">First name<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_firstname$clone"; ?>" id="<?php echo "member_firstname$clone"; ?>" value="<?php echo $split_members[$y][0];?>"> <span class="error"> <?php echo $member_errors[$y]["member_first_name"];?></span> </p>
<p style="margin-left:373px; ">Last name<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_lastname$clone"; ?>" id="<?php echo "member_lastname$clone"; ?>" value="<?php echo $split_members[$y][1];?>"> <span class="error"> <?php echo $member_errors[$y]["member_last_name"];?></span> </p>
<p style="margin-left:350px; ">Street address<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_address$clone"; ?>" id="<?php echo "member_address$clone"; ?>" value="<?php echo $split_members[$y][2];?>"> <span class="error"> <?php echo $member_errors[$y]["member_address"];?></span> </p>
<p style="margin-left:405px; ">City <input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_city$clone"; ?>" id="<?php echo "member_city$clone"; ?>" value="<?php echo $split_members[$y][3];?>"> <span class="error"> <?php echo $member_errors[$y]["member_city"];?></span> </p>
<p style="margin-left:402px;">State<select style="margin: 2px; margin-left: 5px; margin-right: 5px;" name="<?php echo "member_state$clone"; ?>" id ="<?php echo "member_state$clone"; ?>">
<?php //$states = listStates(statesList());
foreach($states as $value){
echo '<option >'.$value.'</option>';
} echo '<option selected>'.$split_members[$y][4].'</option>'; ?>
</select> <span class="error"> <?php echo $member_errors[$y]["member_state"];?></span> </p>
<p style="margin-left:384px;">ZIP code<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_zip$clone"; ?>" id="<?php echo "member_zip$clone"; ?>" value="<?php echo $split_members[$y][5];?>"> <span class="error"> <?php echo $member_errors[$y]["member_zip"];?></span> </p>
</div>
<?php $y++; $clone++; } while ($y < count($split_members)); ?>
И я использую следующий JavaScript:
$(document).ready(function() {
$("#btnAdd").click(function() {
$("#btnDel").prop("disabled",false);
var num = $(".clonedSection").length;
var newNum = new Number(num + 1);
var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
newSection.children(":nth-child(1)").children(":first").attr("id", "member_label" + newNum);
newSection.children(":nth-child(2)").children(":first").attr("name", "member_firstname" + newNum).attr("id", "member_firstname" + newNum).attr("value", "");
newSection.children(":nth-child(3)").children(":first").attr("name", "member_lastname" + newNum).attr("id", "member_lastname" + newNum).attr("value", "");
newSection.children(":nth-child(4)").children(":first").attr("name", "member_address" + newNum).attr("id", "member_address" + newNum).attr("value", "");
newSection.children(":nth-child(5)").children(":first").attr("name", "member_city" + newNum).attr("id", "member_city" + newNum).attr("value", "");
newSection.children(":nth-child(6)").children(":first").attr("name", "member_state" + newNum).attr("id", "member_state" + newNum).attr("value", "");
newSection.children(":nth-child(7)").children(":first").attr("name", "member_zip" + newNum).attr("id", "member_zip" + newNum).attr("value", "");$(".clonedSection").last().append(newSection);
elem = document.getElementById('member_label' + newNum);
elem.innerHTML = "Director / Member " + newNum;
if (newNum == 12)
$("#btnAdd").prop("disabled",true);
});
$("#btnDel").click(function() {
var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
$("#clonedSection" + num).remove(); // remove the last element
// enable the "add" button
$("#btnAdd").prop("disabled",false);
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$("#btnDel").prop("disabled",true);
});
//$("#btnDel").attr("disabled","disabled");
$("#btnDel").prop("disabled",true);
var count = $(".clonedSection").length;
if (count > 1)
$("#btnDel").prop("disabled",false);
//$("#btnDel").disabled = false;
});
Решение
Вы делаете это более сложным, чем нужно.
Если у вас есть вход <input name="example[0]" /> и клонировать это, и попытаться сделать это <input name="example[1]" /> со странными приращениями и тому подобное, просто используйте версию массива:
<input name="example[]" value="My key will be 0" />
<input name="example[]" value="My key will be 1" />
<input name="example[]" value="My key will be 2" />
Чтобы использовать это снова в php:
foreach($_POST['example'] as $key =>$value){
echo $key.': '.$value.'<br />';
echo $key.': '.$_POST['anotherName'][$key]; // (example for another variable)
}
Как вы видете, много менее сложный и намного легче читать и поддерживать. Таким образом, вы можете клонировать свою форму, не беспокоясь о том, какое это число, вы можете легко просмотреть их.
Если вы к этому не привыкли, я все же рекомендую попробовать это, возможно, только в небольшой тестовой настройке. Управление массивными формами — это навык с большой ценностью.
Другие решения
Других решений пока нет …