带有重复项的 JavaScript 和 php 表单提交

Question

我有一个重复的表格“董事/成员”。表单工作得很好，这意味着它在提交之前添加和删除成员。问题是第一次提交工作正常，这意味着所有变量都打印回值，并且表单显示的次数与“do loop”输入的成员一样多。但在第二次提交后，表单只发送最后输入的成员。似乎某处存在逻辑错误。有人能帮我吗？

<?php $y=0; $clone =1;  do{ ?>

    <div id="<?php echo "clonedSection$clone"; ?>" class="clonedSection" >

        <p><label id="<?php echo "member_label$clone"; ?>"  >  <?php echo "Director / Member $clone"; ?></label> </p>
        <p>First name:<input type="text" name="member_firstname" id="member_firstname" value="<?php echo $split_members[$y][0];?>"> <span class="error"> <?php echo $member_errors[$y]["member_first_name"];?></span> </p>
        <p>Last name:<input type="text" name="member_lastname" id="member_lastname" value="<?php echo $split_members[$y][1];?>"> <span class="error"> <?php echo $member_errors[$y]["member_last_name"];?></span> </p>
        <p>Street address:<input type="text" name="member_address" id="member_address" value="<?php echo $split_members[$y][2];?>"> <span class="error"> <?php echo $member_errors[$y]["member_address"];?></span> </p>
        <p>City: <input type="text" name="member_city" id="member_city" value="<?php echo $split_members[$y][3];?>"> <span class="error"> <?php echo $member_errors[$y]["member_city"];?></span> </p>
        <p>State:<select name="member_state" id ="member_state">
            <?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>ZIP code:<input type="text" name="member_zip" id="member_zip" 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)); ?>
<div>
    <input type="button" id="btnAdd" value="add another member" />
    <input type="button" id="btnDel" value="remove member" />
</div>

<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $("#btnAdd").click(function() {

            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("id", "member_firstname" + newNum).attr("name", "member_firstname" + newNum);
            newSection.children(":nth-child(3)").children(":first").attr("id", "member_lastname" + newNum).attr("name", "member_lastname" + newNum);
            newSection.children(":nth-child(4)").children(":first").attr("id", "member_address" + newNum).attr("name", "member_address" + newNum);
            newSection.children(":nth-child(5)").children(":first").attr("id", "member_city" + newNum).attr("name", "member_city" + newNum);
            newSection.children(":nth-child(6)").children(":first").attr("id", "member_state" + newNum).attr("name", "member_state" + newNum);
            newSection.children(":nth-child(7)").children(":first").attr("id", "member_zip" + newNum).attr("name", "member_zip" + newNum);

            $(".clonedSection").last().append(newSection)

                elem = document.getElementById('member_label' + newNum);
                elem.innerHTML = "Director / Member " + newNum;

                elem = document.getElementById('member_firstname' + newNum);
                elem.value = "";
                elem = document.getElementById('member_lastname' + newNum);
                elem.value = "";
                elem = document.getElementById('member_address' + newNum);
                elem.value = "";
                elem = document.getElementById('member_city' + newNum);
                elem.value = "";
                elem = document.getElementById('member_state' + newNum);
                elem.value = "";
                elem = document.getElementById('member_zip' + newNum);
                elem.value = "";

            //btnDelete = document.getElementById('btnDel');
            //btnDelete.attr("disabled","");
            $("#btnDel").prop("disabled",false);

            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;
    });
</script>

Answer 1

表单中的name attr 必须是唯一的。检查你的 html，如果你有 <input>s 和 name="member_address" 而不是 name="member_address[x]" 其中x 是 0 到 count-1，你的表单是错误的。