Add Remove input fields dynamic,Add Remove input fields dynamic with jquery,Add Remove input fields dynamic with javascript,Add Remove input fields dynamic using jquery.
In this tutorial I will tell you how to add dynamic input filed with html and jquery plugging, the HTML code written below. You can easily copy it and create a file named inputfield.html Paste this code.
inputfield.html
<!DOCTYPE html>
<html>
<head>
<title>Add Remove input fields dynamically using jQuery</title>
</head>
<body>
<div class="input_fields_container_part">
<div><input type="text" name="tags">
<button class="btn btn-sm btn-primary add_more_button">Add More Fields</button>
</div>
</div>
</body>
</html>
After that you will be writing javascript code. You have to type the javascript code that is written in the lower script, you copy this code to inputfield.html file.
<script>
$(document).ready(function() {
var max_fields_limit = 8; //set limit for maximum input fields
var x = 1; //initialize counter for text box
$('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
e.preventDefault();
if(x < max_fields_limit){ //check conditions
x++; //counter increment
$('.input_fields_container_part').append('<div><input type="text" name="tags"/><a href="#" class="remove_field" style="margin-left:10px;">Remove</a></div>'); //add input field
}
});
$('.input_fields_container_part').on("click",".remove_field", function(e){ //user click on remove text links
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
The above jQuery script is handling the add and remove functionality of input fields.
The max_fields_limit variable define the limit to add maximum number of input fields.
The input_fields_container_part is the parent div of all input fields and it is used to select the parent div of input field.
The add_more_button variable selects the button element.
The x variable is used to define the initial counter, it will also increase or decrease by clicking the add or remove button to count the input fields.
When user click on Add More Fields button, it will check the maximum number of input fields to be added, if counter variable x is less than max_fields_limit, then it will append new input field and remove link button into its parent div which is input_fields_container_part and counter of input field will be incremented.
Similarly when user click on Remove button the relevant div of that input field is removed and counter of input field will be decremented.
Then you have to use plugging of jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Below you are now writing the entire code in a single file.You can create a dynamic input field by creating this same file by using this code.
inputfield.html
<!DOCTYPE html>
<html>
<head>
<title>Add Remove input fields dynamically using jQuery</title>
</head>
<body>
<div class="input_fields_container_part">
<div><input type="text" name="tags">
<button class="btn btn-sm btn-primary add_more_button">Add More Fields</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var max_fields_limit = 8; //set limit for maximum input fields
var x = 1; //initialize counter for text box
$('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
e.preventDefault();
if(x < max_fields_limit){ //check conditions
x++; //counter increment
$('.input_fields_container_part').append('<div><input type="text" name="tags"/><a href="#" class="remove_field" style="margin-left:10px;">Remove</a></div>'); //add input field
}
});
$('.input_fields_container_part').on("click",".remove_field", function(e){ //user click on remove text links
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
</body>
</html>