Dynamically Add Remove input fields using JQuery Ajax

In this section, we are going to learn about the addition and deletion of fields from input dynamically. We will use Ajax, JQuery, and PHP to do this. In our below example, we will use JQuery to add and remove fields, and we will use PHP to store them into the database. In our example, we will handle the field value, which is dynamically added. We will use PHP Bootstrap to save it in the database of mysql.

Suppose the client needs to add more than one value into the database. In this case, we require to add more functionality for them. If we want to make our form more interesting and attractive, we can provide “+” button to the users through which they can more than one number of values at a time. In order to proceed this, we will use step by step process, which is described as follows:

Step 1:

In this step, we are going to Create Database Table. For this, we will create a database named “test”, and we will also create a table named “tagslist”, which will contain two columns of id and name. After that, we will use the below sql query to easily create the “tagslist” table.

SQL Query:

  CREATE TABLE IF NOT EXISTS `tagslist` (    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,    `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,    PRIMARY KEY (`id`)  ) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci AUTO_INCREMENT=24 ;  

Step 2:

In this step, we will create index.php file. In this file, we will create form which will contain button and an input text box. We will also add some more fields by writing the following code in JQuery. So we will use index.php file and add the following code into it:

index.php:

  <!DOCTYPE html>  <html>  <head>      <title> Add or Remove input fields Dynamically using Ajax and JQuery</title>      <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” />        <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>      <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>  </head>  <body>    <div class=”container”>      <h2 align=”center”> Add or Remove Input Fields Dynamically using Ajax and 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” required=”” /></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>    <script type=”text/javascript”>      $(document).ready(function(){              var postURL = “/addmore.php”;        var i=1;            $(‘#add’).click(function(){               i++;               $(‘#dynamic_field’).append(‘<tr id=”row’+i+'” class=”dynamic-added”><td><input type=”text” name=”name[]” placeholder=”Enter your Name” class=”form-control name_list” required /></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:postURL,                    method:”POST”,                    data:$(‘#add_name’).serialize(),                  type:’json’,                  success:function(data)                    {                    i=1;                    $(‘.dynamic-added’).remove();                    $(‘#add_name’)[0].reset();              alert(‘Record Inserted Successfully.’);                  }               });          });        });    </script>  </body>  </html>  

Step 3:

In this step, we are going to create addmore.php file. We will use MySQL query to enter the database data. So we will use the addmore.php file and add the following code into it:

addmore.php:

  <?php    define (DB_USER, “root”);  define (DB_PASSWORD, “root”);  define (DB_DATABASE, “test”);  define (DB_HOST, “localhost”);  $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);    if(!empty($_POST[“name”])){    foreach ($_POST[“name”] as $key => $value) {  $sql = “INSERT INTO tagslist(name) VALUES (‘”.$value.”‘)”;  $mysqli->query($sql);  }  echo json_encode([‘success’=>’Names Inserted successfully.’]);  }    ?>  

Now our above code is ready, and we can run it. When we run it, the following output will be generated:

Dynamically Add Remove input fields using JQuery Ajax

Next TopicBarcode jQuery example

Dynamically Add Remove input fields using JQuery Ajax

Dynamically Add Remove input fields using JQuery Ajax

Method in Java

Delete Multiple Records using Checkbox in Laravel

You may also like