Friday, 26 February 2016

Dynamically Add / Remove input fields in PHP with Jquery Ajax







Read Also - How to Edit Dynamic HTML Field by using Ajax with PHP



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";  
 }  
 ?> 
   

48 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 a blog administrator.

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

    ReplyDelete
  9. This comment has been removed by a blog administrator.

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

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. Wonderful blog.. Thanks for sharing informative blog.. its very useful to me..

    iOS Training in Chennai

    ReplyDelete
  13. Wonderful blog.. Thanks for sharing informative blog.. its very useful to me..

    iOS Training in Chennai

    ReplyDelete
  14. how to add all submitted value into a single row name name1 name2 etc it is possible

    ReplyDelete
  15. hello, can u help me if i want to make the input into select button... and the select button will display data from database

    ReplyDelete
  16. Nice post By reading your blog, i get inspired and this provides some useful information. Thank you for posting this exclusive post for our vision.
    Digital Marketing Training

    ReplyDelete
  17. not working for php pls help

    ReplyDelete
  18. I think that if you use increment with the add field button, then you should also use decrement with the delete field button. why do I need to add and remove buttons if they are not full.

    ReplyDelete
  19. After reading your blog, I was quite interested to learn more about this information. Thanks for sharing.
    No:1 Best PGDCA Training Center in kanchipuram|

    ReplyDelete
  20. Como fazer ele funcionar com o select2 nos campos adicionais?

    ReplyDelete
  21. hey .its a amazing post.thanks for sharing a great article.keep it up
    www.offsidetech.com

    ReplyDelete
  22. I have read your blog. Good and more information useful for me, Thanks for sharing this information keep it up....
    Best CorelDraw Training in Chennai

    ReplyDelete
  23. It's interesting that many of the bloggers to helped clarify a few things for me as well as giving.Most of ideas can be nice content.The people to give them a good shake to get your point and across the command. Best MS Office Training Institute In Kanchipuram|

    ReplyDelete
  24. You have made some good points there. I looked on the net for additional information about the issue and found most individuals will go along with your views on this site.
    Tech geek

    ReplyDelete
  25. Excellent post,this is really helpful to me.Continue sharing.
    Linux Course in Chennai

    ReplyDelete
  26. Very nice blogs!!! I have to learning for lot of information for this sites...Sharing for wonderful information. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.…
    Matlab Project Center in Chennai |
    Matlab Project Center in Chennai

    ReplyDelete
  27. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.…
    Python training in Chennai |
    Python training in Tambaram

    ReplyDelete
  28. I haven't heard a peep from you in a while. It is great to see you again. Thanks for the info. I will be checking it out and I love the banner.
    Best MATLAB Training Institute in Chennai

    ReplyDelete
  29. I read this article. I think You put a lot of effort to create this article. I appreciate your work.
    Embedded System Training Institute in Chennai | Embedded Training Center in Velachery | Embedded Training in Guindy

    ReplyDelete
  30. I would like to get source code of this webslesson.info/2018/03/ajax-crud-on-dynamically-add-remove-input-feilds-in link. Plz advice me or send to my mail.

    ReplyDelete
  31. Thank u for sharing such nice information.!! Total recall is also good one.!! PMP Ceritification in Chennai|

    ReplyDelete
  32. Nice Blog...looking amazing...thank you so much for sharing such a wonderful blog...keep sharing... Best CCNA Certification In Chennai|

    ReplyDelete
  33. this blog is really useful and it is very interesting thanks for sharing , it is really good and exclusive. Best Prince 2 Exam center in chennai|

    ReplyDelete
  34. You are the best. You saved me 2 working days. Thanks!

    ReplyDelete
  35. Thanks for another great post. The place else may anyone get that type of information in such a perfect way of writing? I’ve a presentation next week, and I’m at the look for such information. Best CCNA Training Institute in Chennai

    ReplyDelete
  36. merci beaucoup pour ce tutoriel

    ReplyDelete
  37. Very happy to see this blog. Gives a wonderful information with coded explanaion. Thank you for this blog. very useful to me. Prince2 Certification Center in Chennai |

    ReplyDelete