JavaScript клонирование формы

Question

Я пытаюсь клонировать простую форму «директоров/участников». Когда я нажимаю кнопку «добавить кнопку участника», он клонирует все формы, но не удаляет поле почтового индекса. Кроме того, когда я отправляю форму, он не представляет первые два поля клонированных форм. Он принимает значения имени и фамилии и присваивает их адресу и городу и т. Д. Итак, чтобы суммировать его, он не отправляет два поля, и я думаю, что это состояния и поля в клопиках клонированных форм, которые приносят мне неприятности, но Я не понимаю, почему.

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

}); 

Answer 1

вы делаете это путь более сложный, чем это необходимо.

Если у вас есть вход <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) 
} 

Как вы можете видеть, много менее сложный и гораздо более легкий для чтения и обслуживания. Таким образом, вы можете клонировать вашу форму, не беспокоясь о том, какой номер она есть, вы можете легко пропустить их.
Если вы не привыкли к этому, я по-прежнему рекомендую попробовать это, возможно, только в небольшой тестовой настройке. Управление массивными формами - это навык с большой стоимостью.