Question

我正在尝试克隆简单的＆＃34;导演/成员＆＃34;形成。当我点击＆＃34;添加成员按钮＆＃34;它克隆了表单中的所有内容，但它不会删除邮政编码字段。此外，当我提交表单时，它不会提交克隆表单的前两个字段。它需要名字和姓氏的值，并将其分配给地址和城市等等......所以，总结一下它不会发送两个字段，我认为它的克隆形式的状态和zip字段给出了我烦恼，但我不明白为什么。

$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)
}

正如您所看到的，很多不那么复杂，也更容易阅读和维护。通过这种方式，您可以克隆表单而无需担心它是哪个数字，您可以轻松地遍历它们如果您还没有习惯，我仍然建议尝试这个，可能只在一个小的测试设置中。控制阵列形式是一项具有很大价值的技能。

JavaScript表单克隆

1 个答案: