Question

我的代码尝试通过单击“添加”按钮允许用户添加新文本字段。我想将用户添加的所有文本字段（是2,3,4或更多）发布到下一页，以便我可以检索用户输入的数据。

P / S：添加了新要求：检索用户输入的数据和打印数据。

这是我的代码：

    <html> 
    <head>
        <script type="text/javascript" src="jquery.js"></script>

    </head>
<body>
    <script>
    $(document).ready(function(){
        var counter = 2;
        $("#addMenuTab").click(function () {
            if(counter>10){
                alert("Only 10 textboxes allow");
                return false;
            }   

            var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
            newTextBoxDiv.after().html('<label>Menu Tab #'+ counter + ' : </label>' +
                '<input type="text" name="textbox' + counter + 
                '" id="textbox' + counter + '" value="" >');

            newTextBoxDiv.appendTo("#TextBoxesGroup");
            counter++;
        });

        $("#removeMenuTab").click(function () {
            if(counter==1){
                alert("No more textbox to remove");
                return false;
            }   
            counter--;
            $("#TextBoxDiv" + counter).remove();
        });

    });
    </script>
    <form name="basicInfo" action="contents.php" method="post"> 
    <div id='TextBoxesGroup'>
                            <div id="TextBoxDiv1">
                                <label>Menu Tab #1 : </label>
                                <input type='text' id='textbox1' >
                            </div>
                        </div>
                        <br/>
                            <input type='button' value='  Add Menu Tab  ' id='addMenuTab' />
                            <input type='button' value='  Remove Menu Tab  ' id='removeMenuTab' />
    </form>
</body>
    </html>

Answer 1

您可以在$ _POST全局数组下的contents.php上获取所有这些字段及其值。例如：

<?php 
    echo "<pre>"; 
    print_R($_POST); 
    echo "</pre>";
?>

Answer 2

我有一个解决您问题的简单方法。使用一个计数器来计算文本字段的数量。我们以后可以将此变量传递给html。修改你的javascript： -

  <script>
$(document).ready(function(){
    var counter = 2;
    $("#count").val(counter-1); 
    $("#addMenuTab").click(function () {
        if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
        }   

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
        newTextBoxDiv.after().html('<label>Menu Tab #'+ counter + ' : </label>' +
            '<input type="text" name="textbox' + counter + 
            '" id="textbox' + counter + '" value="" >');

        newTextBoxDiv.appendTo("#TextBoxesGroup");
        $("#count").val(counter); 
        counter++;                    
    });

    $("#removeMenuTab").click(function () {
        if(counter==1){
            alert("No more textbox to remove");
            return false;
        }   
        counter--;
        $("#TextBoxDiv" + counter).remove();
        $("#count").val(counter-1); 
    });
});
</script>

现在在html表单中添加一个隐藏字段。此隐藏字段的值将是texfield的总数。

<input type='hidden' id='count' name='counter' value=''/>

在您的contents.php中添加以下给定的代码。

$count=$_POST['counter'];
for($i=1;$i<=$count;$i++)
{
 echo "value from textbox$i is".$_POST["textbox$i"]."<br/>";
}

在这里，您将获得变量 $ count 中的文本字段总数由于您的texfields的名称类似于textbox1，textbox2..etc您可以使用循环来使用 POST 方法从上一页获取所有数据。

还要将name属性添加到初始文本框中以使其正常工作。

<input type='text' id='textbox1' name="textbox1" >

Answer 3

我不明白你的问题是什么。如果您添加一些输入，例如textbox10，您将能够在服务器上轻松阅读textbox10。

如何从第1页到第2页的字段发布变量

3 个答案: