CODEWITHSUNDEEP
javascriptjqueryhtml
Damian Ruiz
Damian Ruiz

Reputation: 23

Add/Remove multiple inputs type text using jQuery

I'm trying to have two sections of inputs where users can add or remove a text box, this is how my code looks. 

$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = ('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">remove</a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
			//$(wrapper).slideDown(800);
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
    </div>
</div>

 </br>
 
  <div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
    </div>
</div>

The "remove" link works, however when I try to add a text box, the text box is added in both sections. Is there a way of adding the text box only to the div where the "add" link is pressed from? Thank you.

Upvotes: 0

Views: 2164

Answers (3)

Nick Timmer
Nick Timmer

Reputation: 425

$(this.parentElement).append(fieldHTML); // Add field html

Edited Answer so both can have up to 10:

`$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = ('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">remove</a></div>'; //New input field html 
$(addButton).click(function(){ //Once add button is clicked
    var theWrapper = $(this).closest(wrapper);
    var numOfChildren = theWrapper.children().length;
    if( numOfChildren < maxField){ //Check maximum number of input fields
        theWrapper.append(fieldHTML);
    }
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
});

});`

Upvotes: 1

combatc2
combatc2

Reputation: 1263

You could use jQuery's closest function - see this JSFiddle: https://jsfiddle.net/8sdpLy3L/

$(this).closest(wrapper).append(fieldHTML);

Upvotes: 1

FunkyMonk91
FunkyMonk91

Reputation: 1481

It's because your var wrapper = ('.field_wrapper'); //Input field wrapper is referencing the .field_wrapper class. So when you go to append with $(wrapper).append(fieldHTML); // Add field html It's adding it to both elements that have that class.

I would add an id to the wrapper you want to append the field to and separate click handlers for the add buttons, or perhaps a data attribute to the add buttons to point to the correct id.

Upvotes: 0

Related Questions