In this article we will learn about some of the frequently asked HTML programming questions in technical like “input field with add button that creates another input” Code Answer’s. When creating scripts and web applications, error handling is an important part. If your code lacks error checking code, your program may look very unprofessional and you may be open to security risks. Error or stack handling on html was simple and easy. An error message with filename, line number and a message describing the error is sent to the browser. This tutorial contains some of the most common error checking methods in HTML. Below are some solution about “input field with add button that creates another input” Code Answer’s.
input field with add button that creates another input
xxxxxxxxxx
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>
input field with add button that creates another input
xxxxxxxxxx
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
});
