Javascript表单重复

时间:2014-12-15 17:19:40

标签: javascript forms duplicates

我正在尝试复制该导演/会员表格。我想添加按钮来添加另一个成员,并删除以删除最后一个条目。代码似乎在某些时候起作用,但现在不再适用了。不记得我改变了什么。添加按钮工作正常,但删除按钮只是禁用。如果我故意启用它,它就不会以正确的方式工作。

 董事/成员
        <hr>
        <b>Corporations:</b> Please list each director of the company.<br>
        <b>LLCs:</b> Please list each member (owner) of the company.<br>
        <b>Non-Profits: </b> Please enter information for at least three (3) unrelated directors if filing for 501(c)(3) status.<br>
        <br>

        <?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").disabled = false;
            alert(newNum);



            if (newNum == 12)
                $("#btnAdd").attr("disabled","disabled");
        });

        $("#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").attr("disabled","");

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $("#btnDel").attr("disabled","disabled");

        });

        $("#btnDel").attr("disabled","disabled");
        var count = $(".clonedSection").length;
        if (count > 1)
            $("#btnDel").attr("disabled","");
            //$("#btnDel").disabled = false;

    });
</script>   

1 个答案:

答案 0 :(得分:0)

使用.prop("disabled",false);.prop("disabled",true);代替

.attr("disabled","");.attr("disabled","disabled");