javascript - How to add more input fields when user click on plus sign - Stack Overflow

admin管理员组

文章数量:1415709

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...

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...

• javascript
• jquery

Share Improve this question Follow asked Jun 18, 2018 at 12:30 user9880780user9880780 2

• 1 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 Commented Jun 18, 2018 at 12:32
• 2 Possible duplicate of How to add child element using Javascript/Jquery – Krishna Prashatt Commented Jun 18, 2018 at 12:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome./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>

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.

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

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

1. data-repeater-list, which converts the name into an array like tasks[0][item], tasks[1][item].
2. data-repeater-item Element wrap by this attribute, which you would like to repeat.
3. data-repeater-create Apply it to the create button.
4. 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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

本文标签： javascriptHow to add more input fields when user click on plus signStack Overflow