How to add more input fields when user click on plus sign

Question

Let's say I want to add some more input fields to this <p> tag, when user clicks on the + sign, at the end of it.

<p>
    More Links: <span class="glyphicon glyphicon-plus"></span></br>
    Link URL: <input type="text" name="blog_linku_one"> &nbsp; Link Name:  <input type="text" name="blog_linkn_one"></br>
</p>

So if user clicks on that Plus sign, another link with a new name will be added:

<p>
    More Links: <span class="glyphicon glyphicon-plus"></span></br>
    Link URL: <input type="text" name="blog_linku_one"> &nbsp; Link Name: <input type="text" name="blog_linkn_one"></br>
    Link URL 2: <input type="text" name="blog_linku_two"> &nbsp; Link Name 2: <input type="text" name="blog_linkn_two"></br>
</p>

And this process can continue as the user click on plus sign.

So how can I do this with Javascript or jQuery ?

Any idea please...

wrap what you want to copy in an element and then use clone and append. I would also use an input name like blog_linku[] so it passes through an array — Pete
– Pete, Commented Jun 18, 2018 at 12:32
Possible duplicate of How to add child element using Javascript/Jquery — Krishna Prashatt
– Krishna Prashatt, Commented Jun 18, 2018 at 12:33

Sujan Gainju · Accepted Answer · 2018-06-18 12:45:44Z

You need to append() new fields to the parent div containing the fields on click() event of the + sign.

$(document).ready(function() {
var i = 1;
  $('.add').on('click', function() {
    var field = '<br><div>Link URL '+i+': <input type="text" name="blog_linku_one[]"> &nbsp; Link Name '+i+':  <input type="text" name="blog_linkn_one[]"></div>';
    $('.appending_div').append(field);
    i = i+1;
  })
})

.add{
  cursor: pointer;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

    More Links: <span class="fa fa-plus add"></span>
    <div class="appending_div">
      <div>
      Link URL: <input type="text" name="blog_linku_one[]"> &nbsp; Link Name:  <input type="text" name="blog_linkn_one[]">
      </div>
    </div>

Jaskaran Singh · Accepted Answer · 2018-06-18 12:44:32Z

1

Try the following code for this. It will get element with ID "container" from DOM and create new field and append the field to the Container.

//Get container from DOM
var container = document.getElementById("container");

//Create an <input> element, set its type and name attributes 
var input = document.createElement("input");
input.type = "text";
input.name = "blog_linku_" + i;
input.required = "required";
//Add Element to div
container.appendChild(input);

You can create as many elements you want with this snippet. Hope this will help.

answered Jun 18, 2018 at 12:44

Jaskaran Singh

1691 silver badge7 bronze badges

Comments

Ketan Chaudhari · Accepted Answer · 2023-06-07 07:03:01Z

You should try the RepeaterJS plugin, which automatically handles adding more input functionality.

In HTML, there are four attributes necessary to complete this functionality.

data-repeater-list, which converts the name into an array like tasks[0][item], tasks[1][item].
data-repeater-item Element wrap by this attribute, which you would like to repeat.
data-repeater-create Apply it to the create button.
data-repeater-delete Apply it to the delete button.

In the JavaScript, just initialize the repeater function $('.repeater').repeater()

$(document).ready(function () {
  $('.repeater').repeater({
    // (Optional)
    // start with an empty list of repeaters. Set your first (and only)
    // "data-repeater-item" with style="display:none;" and pass the
    // following configuration flag
    initEmpty: false,

    // (Optional)
    // Removes the delete button from the first list item, [defaults to false]
    isFirstItemUndeletable: true,

    // (Optional)
    // Call while add the element
    show: function () {
      $(this).slideDown();
      $(this).find('[data-repeater-create]').remove()
    },

    // (Optional)
    // Call while delete the element
    hide: function (deleteElement) {
      if (confirm('Are you sure you want to delete this element?')) {
        $(this).slideUp(deleteElement);
      }
    },
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>

<form class="repeater">
  <label>Tasks:</label><br>
    <div data-repeater-list="tasks">
      <div data-repeater-item>
        <input type="text" name="item" placeholder="Type your task...." />
        <button type="button" data-repeater-delete>Delete</button>
        <button type="button" data-repeater-create>Add</button>
      </div>
    </div>
</form>

Collectives™ on Stack Overflow

How to add more input fields when user click on plus sign

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related