jquery adding multiple input field is not working

Question

want to add multiple input fields when i click the button but it's only working with single input field.want those input field inline.with space in between field and remove button.

add.js

$(document).ready(function(){
    var next = 1;
    $(".add-more").click(function(e){
        e.preventDefault();
        var addto = "#field" + next;
        var addRemove = "#field" + (next);
        next = next + 1;
        var newIn = '<input autcomplete="off" class="input form-control" id="field2' + next + '" name="field' + next + '" type="text">';
        var newIn1= '<select class="select" id="field1' + next +'" name="field">';
        var newInput = $(newIn+newIn1);
        var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#field" + next).attr('data-source',$(addto).attr('data-source'));
        $("#count").val(next);  

            $('.remove-me').click(function(e){
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#field" + fieldNum;
                $(this).remove();
                $(fieldID).remove();
            });
    });



});

form.html

<form class="form-inline input-append" role="form">
    <button id="b1" class="btn add-more" type="button">Add Tax Component</button>
    <div  type="hidden" name="count" value="1">
        <div class="controls" id="profs">
            <div id="field" class="form-group col-md-12">
                 <select class="select col-md-4" id="field1" name="prof2" hidden>
                      <option>select Tax</option>
                 </select>
                 <input autocomplete="off" class="input col-md-8" id="field2" name="prof1" type="text" placeholder="Type something"  hidden data-items="8"/>
            </div>
        </div>
    </div>
</form>

You shouldn't be attaching event handlers within event handlers... — Terry
– Terry, Commented Feb 19, 2016 at 7:47
You should tell your event how many input fields you want, and create a loop inside the click event. — Jude
– Jude, Commented Feb 19, 2016 at 7:50

pokeymond · Accepted Answer · 2016-02-19 08:41:08Z

You are adding to an unexisting id after the first event. because "#field2" does not exist in your html.

look at this, i edited it:

add.js

$(document).ready(function(){
        var next =1;
        $(".add-more").click(function(e){
            e.preventDefault();
            console.log(next);
            var addto = "#field" + next;
            var addRemove = "#field" + (next);
            next = next + 1;
            var newIn = '<input autcomplete="off" class="input form-control" id="field2' + next + '" name="field' + next + '" type="text">';
            var newIn1= '<select class="select" id="field' + next +'" name="field">';
            var newInput = $(newIn+newIn1);
            var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
            // var removeButton = $(removeBtn);
            $(addto).after(newInput);
            $(addRemove).after(removeBtn);
            $("#field" + next).attr('data-source',$(addto).attr('data-source'));
            $("input[name=count]").val(next);  

        });


        $('body').on("click", ".remove-me", function(e){
            e.preventDefault();
            var fieldNum = this.id.charAt(this.id.length-1);
            var fieldID = "#field2" + fieldNum;
            var selectfieldID = "#field" + fieldNum;
            console.log(fieldNum);
            console.log(fieldID);
            console.log(selectfieldID);
            $(this).remove();
            $(fieldID).remove();
            $(selectfieldID).remove();
        });

    });

And also, dont define an event listener inside an event listener, it will create duplicates, your 1 click will have multiple events. Try using .on() which I used on the edited code.

Jorrex · Accepted Answer · 2016-02-19 08:55:05Z

0

I took a look at your code and made this out of it. Instead of creating an element each time you add one, I took the liberty of rewriting your code so it clones an initial element (a template) and appends it to your document.

Take a look at the snippet code below. This might be what you asked for?

$(".template:first").hide(); //hide template

/* Add new item based on hidden template */
$(".add-more").click(function() {
  var newItem = $(".template:first").clone();
  newItem.find("select").attr("id", "field" + ($(".template").length + 2)); //rewrite id's to avoid duplicates
  newItem.find("input").attr("id", "field" + ($(".template").length + 2)); //rewrite id's to avoid duplicates
  newItem.show(); //show clone of template
  $(".template:last").after(newItem);
  bindRemove();
});

/* Bind remove function to last added button*/
function bindRemove() {
  $(".remove:last").click(function(e) {
    if ($(".remove").length > 1)
      $(this).parents(".template").remove();
  });
}

/* Execute bind-function at startup */
bindRemove();

.template {
  border: 2px solid black;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline input-append" role="form">
  <button id="b1" class="btn add-more" type="button">Add Tax Component</button>
  <div class="template">
    <div class="controls" id="profs">
      <div id="field" class="form-group col-md-12">
        <select class="select col-md-4" id="field1" name="prof2">
          <option>select Tax</option>
        </select>
        <br/>
        <br/>
        <input autocomplete="off" class="input col-md-8" id="field2" name="prof1" type="text" placeholder="Type something" data-items="8" />
        <button class="remove" type="button">
          X
        </button>
      </div>
    </div>
  </div>
</form>

answered Feb 19, 2016 at 8:55

Jorrex

1,5003 gold badges13 silver badges34 bronze badges

2 Comments

Jorrex Over a year ago

Sure thing! That's what SO is for :)

Kamalkrishna Sahu Over a year ago

how this dynamically created input field can be given required attribute. i mean when i add any new input field it will apply that required attribute to that filed and if i am not adding any input field it will just pass. @Jorrex

markoffden · Accepted Answer · 2016-02-19 08:23:05Z

0

You should define some criteria how many inputs do you want, depending on other operational data, for example

var howManyInputs = 15;
$('#target').click(function () {
    for (var i = 0; i < howManyInputs; i++) {
        // add your inputs
    }
    // add your remove button
});

answered Feb 19, 2016 at 8:23

markoffden

1,4681 gold badge15 silver badges35 bronze badges

Collectives™ on Stack Overflow

jquery adding multiple input field is not working

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related