Hi Reader's,
Welcome to FindNerd, today we are going to discuss how to append/add and remove input field in a form with just on a click?
In this blog we will see how to append text input fields in a HTML form using jQuery and process the submitted data using PHP. It is very simple and easy way to add or remove text input field in a form with just on click. The biggest advantage of jQuery lies in its simplicity of selecting elements.
Note:You should always remember give the name with "[]" to text boxes since they are multiple.
You can see below example
<html>
<head>
<!--here define css-->
<style type="text/css">
#width {
max-width: 700px;
margin: 0 auto;
}
</style>
<!-- end css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var max_fields = 5; //give the max no of inputs
var Myform = $(".input_fields"); //this is field Myform or you can say div class
var add_text = $(".add_field_button"); //add the class to your button
var x = 1; //initial text box count
$(add_text).click(function(e){
e.preventDefault();
if(x < max_fields){
x++; //text box increment
$(Myform).append('<div><input type = "text" name = "name[]"><a href="#" class="remove_field">Remove</a></div>');
//check limit and alert message
if( x == 5) {
alert('No more add!');
return false;
}
}
});
$(Myform).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
<div id="width">
<h2>append/add remove of input field</h2>
<div class=" input_fields" >
<form>
<input type="text" name="name[]" placeholder="Enter your name">
<a href="#" class="add_field_button">Add More</a>
</form>
</div>
</div>
</head>
</html>
So this is very simple way to append/add or remove input field just on a click.
Hope this blog will be helpful to you.
0 Comment(s)