a digital blog

AJAX, Java Script, JQuery, MySql, PHP, Tutorial

Dynamically Add or Remove input fields in PHP with JQuery

Dynamically Add or Remove input fields in PHP JQuery

This post explains you about how to Dynamically Add or Remove input fields in PHP with JQuery.

With ADD MORE button we are added input box and with REMOVE button, we delete it. All the input box represent to array called name. On click to submit button ajax request goes to addName.php here first of all we remove all the empty value from the name array and add value into database.

Download Link   Demo Link

I am using one datebase table here called input_field table

Sample database design for table name input_field.

This table contains  id (primary key) and input_field.

CREATE TABLE IF NOT EXISTS `input_field` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `field_value` varchar(500) NOT NULL
)

dbConnect.inc.php

Contains database connectivity code

$mysql_db_hostname = "Host name";
$mysql_db_user = "UserName";
$mysql_db_password = "Password";
$mysql_db_database = "Database Name";

$con = mysql_connect($mysql_db_hostname, $mysql_db_user,
       $mysql_db_password or die("Could not connect database");
//Create a new connection
mysql_select_db($mysql_db_database, $con) or
                 die("Could not select database");
// select database

index.php
This file contain the java script part like add, remove and submit button operation and html code for form.

/*Using this function we create new input box and remove button*/
function addNameSection(){
   var addSectionCount=$("#addSectionCount").val();
   addSectionCount++;
   $("#addSectionCount").val(addSectionCount);
   $("#nameBoxWrap").append('<tr id="nameBox'+addSectionCount+'"><td></td><td><input type="text" id="name'+addSectionCount+'" name="name[]"></td><td><input type="button" class="button" value="REMOVE" onclick=removeNameSection("'+addSectionCount+'")></td></tr>');
}
/*This function is called to remove the input box*/
function removeNameSection(removeId){
   var addSectionCount=$("#addSectionCount").val();
   if(addSectionCount > 1){
     addSectionCount--;
     $("#addSectionCount").val(addSectionCount);
     $("#nameBox"+removeId).remove();
   }
}
/*This function is called to add field value into database*/
function submitSection(){
   $.ajax({
   type: "POST",
   url: "addName.php",
   data: $("#frmSection").serialize(),
   cache: false,
   success: function(result){
      var response=result.split("|~|");
      alert(response['1']);
      if(response['0']=="success"){
          var curpath = window.location.href;
          window.location = curpath;
      }
    }
 });
}

addName.php

This file contain all the logic to add field value into the database

include('dbConnect.inc.php');
if(isset($_POST['addSectionCount'])){
  $nameArr=array_values(array_filter($_POST['name']));
  $addCount=count($nameArr);
  if($addCount > 0){
    $sql="insert into input_field(field_value) values ";
    for($i=0;$i<$addCount;$i++){
      $name=mysql_real_escape_string($nameArr[$i]);
      if($name!=""){
         if($i==$addCount-1){
             $sql.="('".$name."')";
         }else{
             $sql.="('".$name."'),";
         }
       }
    }
  echo 'success|~|Data Added';
 }else{
    echo "error|~|Please enter your name";
 }
}

2 Comments

  1. Very fascinating points you might have prominent , merit for putting up.

  2. Richard

    Woo perfect one.. Thanks


*

Copyright © 91 Web Lessons - a digital blog