Friday, 26 February 2016

Dynamically Add / Remove input fields in PHP with Jquery Ajax



Hello Friends this tutorial is relating to dynamically insert or delete  input html fields using Jquery Ajax with PHP MySql. User can insert more than one data at the same time. User can Add bulk data at same time. Data will be inserted with out page refresh because we use ajax function call for insert data. User can add more fields by clicking on add more button then new textbox will be appear on webpage with remove button. If user want to remove some field then it can be remove input fields on click on remove button. Now a days this functionality is very useful in web application.


Source Code

index.php

 <html>  
      <head>  
           <title>Dynamically Add or Remove input fields in PHP with JQuery</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  
                <h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2>  
                <div class="form-group">  
                     <form name="add_name" id="add_name">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="dynamic_field">  
                                    <tr>  
                                         <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>  
                                         <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                                    </tr>  
                               </table>  
                               <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                          </div>  
                     </form>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      $('#submit').click(function(){            
           $.ajax({  
                url:"name.php",  
                method:"POST",  
                data:$('#add_name').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();  
                }  
           });  
      });  
 });  
 </script>  

name.php

 <?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $number = count($_POST["name"]);  
 if($number > 0)  
 {  
      for($i=0; $i<$number; $i++)  
      {  
           if(trim($_POST["name"][$i] != ''))  
           {  
                $sql = "INSERT INTO tbl_name(name) VALUES('".mysqli_real_escape_string($connect, $_POST["name"][$i])."')";  
                mysqli_query($connect, $sql);  
           }  
      }  
      echo "Data Inserted";  
 }  
 else  
 {  
      echo "Please Enter Name";  
 }  
 ?>  

16 comments:

  1. Useful guide! IS there any official PHP tutorial website for learn the new version of cake PHP.
    Regards,
    PHP Training in Chennai|PHP Course in Chennai

    ReplyDelete
  2. Hello your demo is interesting but I have a problem how do I do if I want to add 3 fields and once add a message that redirects me to another page thank you in advance this urgent help me please

    ReplyDelete
  3. Supper Amazing Article....Thanks

    ReplyDelete
  4. Nice post and really cool info about jquery codings.
    Andriod Training Courses in Chennai

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. excellent articles ! thanks for sharing - Best J2EE Training in Chennai
    Try it Yourself »

    ReplyDelete
  9. Nice post and really cool info about jquery codings.
    tib co training in chennai

    ReplyDelete