Skip to main content

How To Create Dynamic Textbox Using PHP


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.

  1. <?php
  2. if(!empty($_POST["save_Data"])) {
  3. $conn = mysql_connect("localhost","root","");
  4. mysql_select_db("text_box_dynamic",$conn);
  5. $productCount = count($_POST["product_name"]);
  6. $product_itemValues=0;
  7. $query = "INSERT INTO product (product_name,product_price) VALUES ";
  8. $queryValue_textboX = "";
  9. for($i=0;$i<$productCount;$i++) {
  10. if(!empty($_POST["product_name"][$i]) || !empty($_POST["product_price"][$i])) {
  11. $product_itemValues++;
  12. if($queryValue_textboX!="") {
  13. $queryValue_textboX .= ",";
  14. }
  15. $queryValue_textboX .= "('" . $_POST["product_name"][$i] . "', '" . $_POST["product_price"][$i] . "')";
  16. }
  17. }
  18. $sql = $query.$queryValue_textboX;
  19. if($product_itemValues!=0) {
  20. $result = mysql_query($sql);
  21. if(!empty($result)) $message = "Successfully Added.";
  22. }
  23. }
  24. ?>

HTML Code

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

  1. <form method="post">
  2. <div id="outer">
  3. <div id="header">
  4. <div class="float-left">&nbsp;</div>
  5. <div class="float-left col-heading">Product Name</div>
  6. <div class="float-left col-heading">Product Price</div>
  7. </div>
  8. <div id="product">
  9. <?php require_once("input.php") ?>
  10. </div>
  11. <div class="btn-action float-clear">
  12. <input type="button" name="add_item" value="Add More" onClick="addMore_textBox();" />
  13. <input type="button" name="del_item" value="Delete" onClick="deleteRow_box();" />
  14. <input type="submit" name="save_Data" value="Save Data" />
  15. <span class="success"><?php if(isset($message)) { echo $message; }?></span>
  16. </div>
  17. </div>
  18. </form>

For Adding TextBox

This script helps us to add dynamically the textbox.

  1. <script>
  2. function addMore_textBox() {
  3. $("<div>").load("input.php", function() {
  4. $("#product").append($(this).html());
  5. });
  6. }</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.

  1. <script>
  2. function deleteRow_box() {
  3. $('div.product-item').each(function(index, item){
  4. jQuery(':checkbox', this).each(function () {
  5. if ($(this).is(':checked')) {
  6. $(item).remove();
  7. }
  8. });
  9. });
  10. }
  11. </script>

Showing The Data

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

  1. <center>
  2. <table border="1" cellspacing="5" cellpadding="5" style="margin:15px;">
  3. <tr style="color:blue;">
  4.  
  5. <th>
  6. Product Name
  7. </th>
  8. <th>
  9. Product Price
  10. </th>
  11. </tr>
  12. <?php
  13. $conn = mysql_connect("localhost","root","");
  14. mysql_select_db("text_box_dynamic",$conn);
  15. $result= mysql_query("select * from product order by product_id DESC ") or die (mysql_error());
  16. while ($row= mysql_fetch_array ($result) ){
  17. $id=$row['product_id'];
  18. ?>
  19. <tr style="text-align:center;">
  20. <td style="width:200px;">
  21. <?php echo $row['product_name']; ?>
  22. </td>
  23. <td style="width:200px; color:red;">
  24. <?php echo $row['product_price']; ?>
  25. </td>
  26. </tr>
  27. <?php } ?>
  28. </table>
  29. </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.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.