This tutorial will show you how to use jQuery to create textbox that can be added and removed dynamically. Although the data entered in the textbox is been stored in the database using PHP Mysql. View the live demo of the dynamically adding textbox using jQuery by click the below link.

Implementation

Let's see how to create texbox dynamically. In this we will assume that there is list of name that to be stored in the database. The text box value can be deleted by clicking the (-) image. Once entered the submit button the except the deleted value other data names is been stored using php mysql.

The usage should go like this: when i click on (+) ( image) a new textbox will be shown with the serial no. It has remove option with left side, which will remove the text box.

Adding of table rows dynamically

/** Adding table row and append them  ***/

var i=jQuery('#displayy tr').length; //Get the no.of rows in the table
jQuery(".addmore").on('click',function(){
    
count=jQuery('#displayy tr').length - 1; 

if(count<10){ //It allows to add only 10 text box
    html = '';
    html +='';
    html +=''+count+'.';          
    html +='';
    html +='';

    jQuery('#displayy').append(html); //Append the table row with the old table row

    i++;
    }else{
    alert("Maximum 10 Names allowed");  
}

    });

Removing table rows dynamically

jQuery(document).on('click','.delete', function(e) {

count=jQuery('#displayy tr').length - 1;

if(count>2){ // condition to check atleast remain one textbox
var chid  = jQuery(this).attr('id');
var chids = chid.split('_')[1];
   
    jQuery('#delete_'+chids).parents("tr").remove();    //Remove the current table row which is clicked 
    obj=jQuery('#displayy tr').find('.sss');
    jQuery.each( obj, function( key, value ) {
        id=value.id;
        jQuery('#'+id).html(key+1+"."); //Change the s.no in corect order.
    });
}else{
    alert("Atleast one Name shoud be there");
}

});

Database Connection

//Database Connection Settings

define ('hostnameorservername','localhost'); //Your server or hostname goes in here
define ('serverusername','root'); //Your database username goes in here
define ('serverpassword',''); //Your database password goes in here
define ('databasenamed','dynamic'); //Your database name goes in here

global $connection;
$connection = mysqli_connect(hostnameorservername,serverusername,serverpassword,databasenamed) or die('Connection could not be made to the SQL Server. Please report this system error at info@hackandphp.com');

By Thirumani Raj posted on - 12th May 2016

Live Demo Download Script