jQuery Add & Remove Dynamically Input Fields in PHP

Rating: 5.0. From 1 vote.
Please wait...

Sometime Developers face a problem where they need to add dynamic fields in a form.So PHPHURDLES is here to encounter this problem with a easy script to add multiple fields and remove fields.

Jquery Add & Remove Fields In PHP in this script we will discuss about generating input fields in a form and submitting the input field’s value into the database.We have used jQuery to make this functionality very short, simple and powerful. You can add dynamic fields and remove fields easily. Also you can get the fields value in your PHP script, once the form is submitted.

Please follow below instruction to understand our script

Firstly create a file index.php where we will create a form and a javascript for dynamically adding input fields

//HTML

1
2
3
4
5
<form id="add_me" name="add_me">Add
<table id="dynamic"></table>
<input id="submit" name="submit" type="button" value="Submit" />

</form>

//Javascript

At First include the jQuery library.

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>

Once the “Add button” is clicked the new input field HTML would be append into the fields parent table and more fields will be add.

Once the “Remove button” is clicked, the parent table of that particular remove button would be removed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
$(document).ready(function(){
 var i=1;
 $('#add_input').click(function(){
 i++;
 $('#dynamic').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter Your Name"/></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove">Remove</button></td></tr>');
 });
 $(document).on('click', '.btn_remove', function(){
 var button_id = $(this).attr("id");
 $('#row'+button_id+'').remove();
 });
 $('#submit').click(function(){
 $.ajax({
 url:"insert.php",
 method:"POST",
 data:$('#add_me').serialize(),
 success: function(data)
 {
 alert(data);
 $('#add_me')[0].reset();
 }
 });
 });
});
</script>

Now we create a file insert.php which will take values from form and store it in database
Once the multiple form fields are submitted, then you can get the values in PHP script.
Now you can run a foreach loop and insert the values into the database.

Guys we are using mysqli connection because mysql connection is depriciated

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$conn = mysqli_connect("localhost", "root", "", "phphurdles");
$number = count($_POST["name"]);

if($number > 0)
{
 for($i=0; $i<$number; $i++)
 {
 if(trim($_POST["name"][$i] != ''))
 {
 $sql = "INSERT INTO info(name) VALUES('".mysqli_real_escape_string($conn, $_POST["name"][$i])."')";
 mysqli_query($conn, $sql);
 }
 }
 echo "Data Inserted Successfully";
}
else
{
 echo "Enter Your Name";
}
?>

This is how we can dynamically add input fields and store it in database

Hope this tutorial will help our new developers

You can also download full demo from here Download Here

So guys,Please comment us in case of any doubt and keep learning

Because hurdles aren’t really hurdles

6 Comments

  1. Warren said:

    Awesome tutorial, thank you so much. Really appreciate it

    Rating: 3.5. From 2 votes.
    Please wait...
    February 25, 2017
    Reply
    • Saurabh Dubey said:

      Thank You, Warren for the appreciation.

      Cheers!

      Rating: 3.5. From 2 votes.
      Please wait...
      February 25, 2017
      Reply
  2. James said:

    It’s work like an i hope. Thank you.

    Rating: 5.0. From 2 votes.
    Please wait...
    July 29, 2017
    Reply
    • Saurabh Dubey said:

      Thank You, James!

      Rating: 1.0. From 1 vote.
      Please wait...
      July 30, 2017
      Reply
  3. Shivani said:

    Thanks

    Rating: 4.0. From 1 vote.
    Please wait...
    August 19, 2017
    Reply
    • Saurabh Dubey said:

      Welcome Shivani

      No votes yet.
      Please wait...
      August 22, 2017
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Solve : *
30 × 7 =