如何使用PHP动态添加或删除文本框?

时间:2012-12-20 06:55:18

标签: php html

这是我的代码,当我点击添加按钮时,新的文本字段即将到来但总页面刷新并且现有数据也令人耳目一新,请帮帮我。

<?php       
    if( !isset( $_POST['j'] ) ) {
        static $j = 1;
    } else {
        //j is a reference for $i in the loop. $i will loop while it is less than $j.
        if( isset( $_POST['plus'] ) ) {
           $j = $_POST['j']+1; //by incrementing $j, $i will loop one more time.
        }
        if( isset( $_POST['minus'] ) ) {
           if( @$j < 1 ) { //if there is only one box the user can't remove it
               $j = $_POST['j']-1;
           }
        }   
    }
?>
<?php echo '<input type="hidden" name="j" value="' . @$j . '"/>' ?>
<?php for( $i = 0; $i < @$j; $i++ ) { ?>
    <input id="txt_id" name="txt_id[]"  type="text" value="" readonly="readonly"/> 
<? } ?>
<input type ="submit" value="+" name="plus">
<input type ="submit" value="-" name="minus">

3 个答案:

答案 0 :(得分:2)

这是因为您需要设置正在生成的文本字段的值。

尝试用以下方法替换你的for循环:

<?php for( $i = 0; $i < @$j; $i++ ) { ?>
      <input id="txt_id" name="txt_id[]"  type="text" value="<?php echo $_POST['txt_id'][$i];?>" readonly="readonly" />
<? } ?>

答案 1 :(得分:1)

我发布了一个在服务器上实现的代码。所以在本地服务器上尝试了这段代码。它可以帮助您找到解决方案。

<html>

    <head>
        <title> Add/Remove dynamic rows in HTML table </title>
        <script language="javascript">

            function addRow(tableID) {
                var numb = document.getElementById("numb").value;
                for($i=1;$i<=numb;$i++) {
                    var table = document.getElementById(tableID);

                    var rowCount = table.rows.length;
                    var row = table.insertRow(rowCount);

                    var cell1 = row.insertCell(0);
                    var element1 = document.createElement("input");
                    element1.type = "checkbox";
                    cell1.appendChild(element1)[$i];

                    var cell2 = row.insertCell(1);
                    cell2.innerHTML = rowCount + 1;

                    var cell3 = row.insertCell(2);
                    var element2 = document.createElement("input");
                    element2.type = "text";
                    element2.name = "firstname["+rowCount+"]";
                    cell3.appendChild(element2)[$i];

                    var cell4 = row.insertCell(3);
                    var element3 = document.createElement("input");
                    element3.type = "text";
                    element3.name = "lastname["+rowCount+"]";
                    cell4.appendChild(element3)[$i];

                    var cell5 = row.insertCell(3);
                    var element4 = document.createElement("input");
                    element4.type = "text";
                    element4.name = "town["+rowCount+"]";
                    cell5.appendChild(element4)[$i];

                    var cell6 = row.insertCell(3);
                    var element5 = document.createElement("input");
                    element5.type = "text";
                    element5.name = "state["+rowCount+"]";
                    cell6.appendChild(element5)[$i];
                }

            }
        </script>
    </head>
    <body>
     <form action="#" method="post">
        <input type="button" value="Add Row" onclick="addRow('dataTable')" />
        <input type="text" name="numb" id="numb" value="" />
        <input type="submit" name="submit" value="submit" />
        <table id="dataTable" width="350px" border="1">

        </table>
        </form>
    </body>
    </html>

答案 2 :(得分:0)