How To Create Dynamic Textbox Using PHP

Submitted by alpha_luna on Thursday, April 14, 2016 - 14:43.

In this tutorial, we are going to learn on How To Create Dynamic Textbox Using PHP. In this article, it helps to add, delete, or save the textbox dynamically using PHP Language. For deleting TextBox and saving the data, you must check the checkbox to the function. After saving the data that we encode, we have a table below to show all the data that you save. PHP Code This is our PHP syntax for saving our data.

<?php
        if(!empty($_POST["save_Data"])) {
                $conn = mysql_connect("localhost","root","");
                mysql_select_db("text_box_dynamic",$conn);
                $productCount = count($_POST["product_name"]);
                $product_itemValues=0;
                $query = "INSERT INTO product (product_name,product_price) VALUES ";
                $queryValue_textboX = "";
                for($i=0;$i<$productCount;$i++) {
                        if(!empty($_POST["product_name"][$i]) || !empty($_POST["product_price"][$i])) {
                                $product_itemValues++;
                                if($queryValue_textboX!="") {
                                        $queryValue_textboX .= ",";
                                }
                                $queryValue_textboX .= "('" . $_POST["product_name"][$i] . "', '" . $_POST["product_price"][$i] . "')";
                        }
                }
                $sql = $query.$queryValue_textboX;
                if($product_itemValues!=0) {
                        $result = mysql_query($sql);
                        if(!empty($result)) $message = "Successfully Added.";
                }
        }
?>

HTML Code This source code where the user can add, delete, and saving the encoded data.

<form method="post">
        <div id="outer">
                <div id="header">
                        <div class="float-left">&nbsp;</div>
                        <div class="float-left col-heading">Product Name</div>
                        <div class="float-left col-heading">Product Price</div>
                </div>
                <div id="product">
                        <?php require_once("input.php") ?>
                </div>
                <div class="btn-action float-clear">
                        <input type="button" name="add_item" value="Add More" onClick="addMore_textBox();" />
                        <input type="button" name="del_item" value="Delete" onClick="deleteRow_box();" />
                        <input type="submit" name="save_Data" value="Save Data" />
                        <span class="success"><?php if(isset($message)) { echo $message; }?></span>
                </div>
                </div>
</form>

For Adding TextBox This script helps us to add dynamically the textbox.

<script>
function addMore_textBox() {
        $("<div>").load("input.php", function() {
                        $("#product").append($(this).html());
        });     
}</script>

For Deleting TextBox For deleting textbox, we have a checkbox beside in our textbox. And this script will help us to remove checked products.

<script>
function deleteRow_box() {
        $('div.product-item').each(function(index, item){
                jQuery(':checkbox', this).each(function () {
            if ($(this).is(':checked')) {
                                $(item).remove();
            }
        });
        });
}
</script>

Showing The Data This source code will show us all the data that we encode.

<center>
<table border="1" cellspacing="5" cellpadding="5" style="margin:15px;">
        <tr style="color:blue;">
 
                <th>
                        Product Name
                </th>
                <th>
                        Product Price
                </th>
        </tr>
<?php
$conn = mysql_connect("localhost","root","");
mysql_select_db("text_box_dynamic",$conn);
$result= mysql_query("select * from product order by product_id DESC ") or die (mysql_error());
while ($row= mysql_fetch_array ($result) ){
$id=$row['product_id'];
?>
        <tr style="text-align:center;">
                <td style="width:200px;">
                        <?php echo $row['product_name']; ?>
                </td>
                <td style="width:200px; color:red;">
                        <?php echo $row['product_price']; ?>
                </td>
        </tr>
<?php } ?>
</table>
</center>

And, this is the output after saving the data. Output

So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

2336 views