How to take Inputs of Dynamically Created Textbox

2019-06-08 22:36发布

站内文章 / JavaScript
16 0 0

问题:

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:

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


标签： javascript php html mysql textbox
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~