JQuery Add Remove Input Fields Dynamically Example

By Hardik Savani November 5, 2023 Category : jQuery

In this tutorial, I am going to show you how to add remove input fields dynamically in your form using jquery. In this simple example, i give you to add multiple input fields with remove button that way you can remove field if you don't require. In this example i use bootstrap also because layout become pretty good.

In this example, Simply i added two click event of jquery as listed bellow:

1.add-more Class: On ".add-more" class that way we can write jquery append code.

2.remove Class: On ".remove" class that way we can remove input field.

I also added "copy" class div, that will be append after "after-add-more" class that way you can also modify easily on "copy" class like you want to change text or icon etc. It is pretty simple example and you can easily customize this example.

You have to create two file one for generate script code of add more input fields, and second file for getting value of dynamic field value.

So, let's create both files, after finish this example you will find bellow output. you can check on demo for dynamic add more input fields.

Preview:

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:

Read Also: PHP JQuery Chosen Ajax Autocomplete Example
<?php
print_r($_REQUEST['addmore']);
exit;
?>

Tags :
Previous

Laravel Carbon Get Year, Month and Day from Timestamp Example
Next

PHP Remove Duplicates from Multidimensional Array Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares