How to Add remove input fields dynamically using jquery with Bootstrap?

Today now in this post i will show you How to Add remove input fields dynamically using jquery with Bootstrap? Here in this tutorial, I am going to show you an example of how to add remove input fields dynamically in our form by using jquery. Now in this simple an example, where i will give you how to add multiple input fields also with remove button on that way. We can remove any field if we don’t need. Now in this example i am use bootstrap with also because layout it become pretty good.

Here in this example, Simply i will added two click event of jquery as listed bellow:

1.add-more Class: On “.add-more” class on that way we can write the jquery for append code.

2.remove Class: On “.remove” class that way we can easily remove input field.

We need to create two file one for the generate script code for add more input fields, and also second file for getting the value of dynamic field with value.

So, let’s need to create both files, after the finish this example we will find bellow output as you want.

index.php:
<html lang="en">
<head>
  <title>Bootstrap Jquery Add More Field Example</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>


<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Bootstrap Jquery Add More Field Example</div>
    <div class="panel-body">


        <form action="action.php" >


      	<div class="input-group control-group after-add-more">
          <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
          <div class="input-group-btn"> 
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
          </div>
        </div>


        </form>


        <!-- Copy Fields -->
        <div class="copy hide">
          <div class="control-group input-group" style="margin-top:10px">
            <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
            <div class="input-group-btn"> 
              <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
            </div>
          </div>
        </div>


    </div>
  </div>
</div>


<script type="text/javascript">


    $(document).ready(function() {


      $(".add-more").click(function(){ 
          var html = $(".copy").html();
          $(".after-add-more").after(html);
      });


      $("body").on("click",".remove",function(){ 
          $(this).parents(".control-group").remove();
      });


    });


</script>


</body>
</html>
action.php:

In this PHP file you can get value of multiple input fields this way:

<?php
print_r($_REQUEST['addmore']);
exit;
?>

Read Also : How to Show Dynamic Dependent Dropdown in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →