input field with add button that creates another input

Solutions on MaxInterview for input field with add button that creates another input by the best coders in the world

showing results for - "input field with add button that creates another input"
Kai
14 Feb 2020
1<div class="input_fields_wrap">
2    <button class="add_field_button">Add More Fields</button>
3    <div><input type="text" name="mytext[]"></div>
4</div>
Javier
26 Oct 2016
1$(document).ready(function() {
2	var max_fields      = 10; //maximum input boxes allowed
3	var wrapper   		= $(".input_fields_wrap"); //Fields wrapper
4	var add_button      = $(".add_field_button"); //Add button ID
5	
6	var x = 1; //initlal text box count
7	$(add_button).click(function(e){ //on add input button click
8		e.preventDefault();
9		if(x < max_fields){ //max input box allowed
10			x++; //text box increment
11			$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
12		}
13	});
14	
15	$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
16		e.preventDefault(); $(this).parent('div').remove(); x--;
17	})
18});