How to take Inputs of Dynamically Created Textbox

2019-06-08 22:32发布

站内问答 / JavaScript
1115 1 5

In Sample.php I have

<html>
<head>
<title>Test</title>
</head>

<script language="javascript">
    var count = 1;

function addRow(divId) {



    var parentDiv = document.getElementById(divId);

    var eleDiv = document.createElement("div");
    eleDiv.setAttribute("name", "olddiv");
    eleDiv.setAttribute("id", "olddiv");

    var eleText = document.createElement("input");
    eleText.setAttribute("type", "text");
    eleText.setAttribute("name", 'textbox' + count);
    eleText.setAttribute("id", "textbox" + count);

    var eleBtn = document.createElement("input");
    eleBtn.setAttribute("type", "button");
    eleBtn.setAttribute("value", "delete");
    eleBtn.setAttribute("name", "button");
    eleBtn.setAttribute("id", "button");
    eleBtn.setAttribute("onclick", "deleteRow('button')");

    parentDiv.appendChild(eleDiv);

    eleDiv.appendChild(eleText);
    eleDiv.appendChild(eleBtn);

    var golu=count.toString();
    document.getElementById("h").value= golu;
    count++;

}

function deleteRow(tableID) {
        var div = document.getElementById('olddiv');
        if (div) {
            div.parentNode.removeChild(div);
        }
        var golu=count.toString();
    document.getElementById("h").value= golu;
}

var golu=count.toString();
    document.getElementById("h").value= golu;



</script>
<body>
<form action="Page.php" method="post">
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<div id="dataTable"><INPUT type="text" name="textbox0" id="textbox0"/></div>
 <input type"hidden" id="h" name="h" value="0"/>
 <button  type="submit" name="submit" id="submit">Submit</button>
</form>

</body>
</html>

In Page.php I have

<?php
 include_once('db.php');

 $x=$_POST["h"];
 $y=intval($x);
 $z=0;
 while($z<=$y){
 $var[z]=$_POST['textbox'][$z];
 echo "$var[$z]";
 $sql="INSERT into Data values('".$var[z]."');";

 $query = mysql_query($sql);
 }
?>

My problems:

  1. My aim is to receive all the value of textbox0, textbox1,..etc. by using loop in page.php.

    But I am not able to get the desired result. Actually after submitting, Pape.php appears empty. After receiving all, I also want them to store in MySQL Database.

  2. Whenever I delete a textbox the sequence of the textboxes' id doesn't change.

Please tell me what to do.

1条回答
劳资没心，怎么记你
2楼-- · 2019-06-08 23:17

You can do this following way.

Whenever you create textbox using JavaScript or jQuery, the maintain the count of the text box, suppose you have two textbox by default on the HTML, so store that count into the hidden field like you did that:

<input type"hidden" id="h" name="h" value="0"/>

Then try this, you are reading the value in wrong way:

Instead of using $var[z]=$_POST['textbox'][$z]; use $var[z]=$_POST['textbox'.$z];.

I think instead of editing each textbox id value, just remove it from HTML and check into the PHP code:

    <?php
     include_once('db.php');

     $x=$_POST["h"];
     $y=intval($x);
     $z=0;
     while($z<=$y){
            if(isset($_POST['textbox'.$z]) && !empty($_POST['textbox'.$z])){
                     $var[z]=$_POST['textbox'.$z];
                     echo "$var[$z]";
                     $sql="INSERT into the Data values('".$var[z]."');";
                     $query=mysql_query($sql);
            }
     }
    ?>

Another way, to solve both of your problems :)

test.html:

<html>
    <title>TEST</title>
    <body>
        <form action="test.php" method="post">
        <input type="text" name="demo[]" value=""/>
        <input type="text" name="demo[]" value=""/>
        <input type="text" name="demo[]" value=""/>
        <input type="text" name="demo[]" value=""/>
        <input type="text" name="demo[]" value=""/>
        <input type="submit">
        </form>
    </body>
</html>

test.php:

print_r($_POST);
exit;

output:

Array ( [demo] => Array ( [0] => zxc [1] => zxc [2] => ewe [3] => ecc [4] => zzx ) )
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)