PHP jQuery Dynamic Textbox

This tutorial helps to add or remove textbox dynamically using jQuery and PHP. It also describes how to read the values of dynamically created text boxes and save them to the database.

1. Save textbox HTML in separate file.
2. Load and append dynamic textbox.
3. Remove textbox item on delete event.
4. Read and insert data into the database on submit.

View Demo

This screenshot shows the dynamically add input box using jQuery AJAX add more option. The checkboxes before the dynamically added input field rows are used to bulk select the rows to delete.

Database Script

Run this CREATE statement while setting up this example in your local environment.

CREATE TABLE `item` (
  `id` int(11) NOT NULL,
  `item_name` varchar(255) DEFAULT NULL,
  `item_price` double DEFAULT NULL
);

--
-- Indexes for table `item`
--
ALTER TABLE `item`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `item`
--
ALTER TABLE `item`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Textbox HTML

Save this code as input.php. This file will be loaded later using jQuery to append textbox HTML code to the target location.

<div class="product-item float-clear" style="clear: both;">
    <div class="float-left">
        <input type="checkbox" name="item_index[]" />
    </div>
    <div class="float-left">
        <input type="text" name="item_name[]"/>
    </div>
    <div class="float-left">
        <input type="text" name="item_price[]" />
    </div>
</div>

Load and Append Dynamic Textbox

The textbox markup will be added dynamically by using jQuery append() and load(). The code is,

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

Remove Textbox

We have the checkbox for each row dynamically added the text box for selecting rows to be removed from the delete event. And script for removing checked items is,

function deleteRow() {
    $('div.product-item').each(function(index, item) {
        jQuery(':checkbox', this).each(function() {
            if ($(this).is(':checked')) {
                $(item).remove();
                $("#delete-button-required").html("Choose at least 1 row.").css("color", "red").hide();
            }
            else {
                $("#delete-button-required").html("Choose at least 1 row.").css("color", "red").show();
                $("#error").hide();
            }
        });
    });
}

Read Dynamic Textbox Input

This is, as usual, what we have seen in several MySQL crud examples. The code is,

<?php
if (! empty($_POST["save"])) {
    $connection = mysqli_connect("localhost", "root", "", "dynamic_textbox");
    $itemCount = count($_POST["item_name"]);
    for ($i = 0; $i < $itemCount; $i ++) {
        if (! empty($_POST["item_name"][$i]) || ! empty($_POST["item_price"][$i])) {
            $query = "INSERT INTO item (item_name,item_price) VALUES(?, ?)";
            $statement = $connection->prepare($query);
            $statement->bind_param('si', $_POST["item_name"][$i], $_POST["item_price"][$i]);
            $result = $statement->execute();
        }
        if (! empty($result)) {
            $response = array("type"=>"success", "message"=>"Added successfully.");
        } else {
            $response = array("type"=>"error", "message"=>"Please enter the data.");
        }
    }
}
?>

View DemoDownload

↑ Back to Top

• PHP
  • Learn PHP
  • PHP Introduction
  • PHP Basics
  • PHP Shopping Cart
  • Payment Gateway
  • Contact Form
  • PHP Login Registration
  • Comments System
  • Types, Variables & Operators
  • PHP Strings
  • PHP Arrays
  • PHP Functions
  • PHP OOPS
  • Event Management System
  • PHP Mail
  • PHP Forms
    • PHP Request Methods
    • Access Form Data from PHP
    • PHP Form Validation
    • Multiselect in PHP
    • PHP jQuery Dynamic Textbox
    • How to Convert Text to Image using PHP
    • PHP Price Range Search using jQuery Slider
    • HTML Dropdown List with CSS and JavaScript
  • Advanced
  • PHP AJAX
  • RESTful API
  • PHP Databases
  • PHP Sessions and Cookies
  • Error and Exception Handling
  • File Upload
  • File Import Export
  • Files and Directories
  • PHP Date Time
  • PHP XML
  • PHP CSV
  • PHP JSON
  • PHP Code Samples
  • Library
  • PHP Freelancer
• jQuery
• JavaScript
• WordPress
• MySQL
• CSS

• Share
• Tweet
• Share

1. Simple PHP Shopping Cart
2. Stripe Payment Gateway Integration using PHP
3. User Registration in PHP with Login: Form with MySQL and Code Download
4. PHP Contact Form
5. How to Create Dynamic Stacked Bar, Doughnut and Pie charts in PHP with Chart.js