Dynamically Add Remove multiple input fields in PHP MYSQL with Jquery Ajax

Dynamically Add Remove multiple input fields in PHP MYSQL with Jquery Ajax

In this Post We Will Explain About is Dynamically Add Remove multiple input fields in PHP MYSQL with Jquery Ajax With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to jQuery Add & Remove Dynamically Input Fields in PHPExample

In this post we will show you Best way to implement Dynamically Add – Remove input fields in PHP MYSQL with Jquery Ajax , hear for Dynamically Add or Remove input fields in PHP MYSQL with JQuerywith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

You can download source code and Demo from below link.




Add Remove input fields dynamically using jQuery with PHP MYSQL

Jquery Add and Remove Dynamically Fields In PHP andMYSQL in this script we will some discuss about create generating HTML input fields in a DOM form and submitting to PHP Side the HTML input field’s value into the MYSQL database.We have used simple jQuery to make this dynamic functionality easy very short data, simple and easy powerful. we can add input dynamic fields and remove table fields easily. Also we can get simple the input fields value in your MYSQL INSERT Multiple PHP script, once the HTML form is submitted using PHP.

Firstly create a file simple root index.php where we will create a HTML DOM form and a jQuery for dynamically adding and remove input fields

Database Table

Table Name : live_table
Collums :
id(primary key)
name

index.php

 <html>  
      <head>  
           <title>Add Remove input fields dynamically using jQuery with PHP MYSQL</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
		   <!-- Include External Libs By Live24u.com-->
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
		   <!-- Include External Libs By Live24u.com-->
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <hr />  
                <hr />  
                <h2 align="center">Add Remove input fields dynamically using jQuery with PHP MYSQL</h2>  
                <div class="form-group">  
                     <form name="data_addname" id="data_addname">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="live_dataFields">  
                                    <tr>  
                                         <td><input type="text" name="name[]" placeholder="Enter Employer Name" class="form-control name_list" /></td>  
                                         <td><button type="button" name="all_add" id="all_add" class="btn btn-success">Add More</button></td>  
                                    </tr>  
                               </table>  
                               <input type="button" name="submit" id="submit" class="btn btn-info" value="Add Employer" />  
                          </div>  
                     </form>  
                </div>  
           </div>  
      </body>  
 </html> 

do_data.php

 <?php  
 $db_connect = mysqli_connect("localhost", "root", "Your DataBase Password", "Your DataBase Name");  
 $total_records = count($_POST["name"]);  
 if($total_records > 0)  
 {  
      for($i=0; $i<$total_records; $i++)  
      {  
           if(trim($_POST["name"][$i] != ''))  
           {  
                $sql_query = "INSERT INTO live_table(name) VALUES('".mysqli_real_escape_string($db_connect, $_POST["name"][$i])."')";  
                mysqli_query($db_connect, $sql);  
           }  
      }  
      echo "Your Data Inserted Successfully!!";  
 }  
 else  
 {  
      echo "Please Enter Your Some Name Required";  
 }  
 ?> 

Scropt.js

 <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#all_add').click(function(){  
           i++;  
           $('#live_dataFields').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter Employer 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:"do_data.php",  
                method:"POST",  
                data:$('#data_addname').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#data_addname')[0].reset();  
                }  
           });  
      });  
 });  
 </script>

You can download source code and Demo from below link.





Example

I hope you have Got What is Add Remove input fields dynamically using jQuery with PHP MYSQL And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.

http://live24u.com/wp-content/uploads/2017/08/Dynamically-Add-Remove-multiple-input-fields-in-PHP-MYSQL-with-Jquery-Ajax.pnghttp://live24u.com/wp-content/uploads/2017/08/Dynamically-Add-Remove-multiple-input-fields-in-PHP-MYSQL-with-Jquery-Ajax-150x150.pngadminAjaxCSSHtmlJavaScriptjQueryMysqlMysqliPHPAdd Remove input fields dynamically using jQuery with PHP MYSQL,Dynamically Add - Remove input fields in PHP MYSQL with Jquery Ajax,Dynamically Add or Remove input fields in PHP MYSQL with JQuery,Dynamically Add Remove multiple input fields in PHP MYSQL with Jquery Ajax,jQuery Add & Remove Dynamically Input Fields in PHPDynamically Add Remove multiple input fields in PHP MYSQL with Jquery Ajax In this Post We Will Explain About is Dynamically Add Remove multiple input fields in PHP MYSQL with Jquery Ajax With Example and Demo.Welcome on Live24u.com - Examples, The best For Learn web development Tutorials,Demo with Example! Hi...BIGGEST AND FASTEST Web Tutorials - live24u.com

Sorry, comments are closed for this post