eSolutionsG: Add More Input Fields

Showing posts with label Add More Input Fields. Show all posts

Adding or removing multiple input fields with a limit set. If you have added a certain limit of input fields you will get an alert or something. But before that, make sure that you have read the previous part of this tutorial jQuery Add/Remove Input Fields Dynamically

jQuery

So far, We have the below jQuery set up from previous tutorial.

$(document).ready(function(){
 //when the Add Filed button is clicked
 $("#add").click(function (e) {
  //Append a new row of code to the "#items" div
  $("#items").append('<div>
<input type="text" name="input[]"><button class="delete">Delete</button></div>
');
 });

 $("body").on("click", ".delete", function (e) {
  $(this).parent("div").remove();
 });
});

$(document).ready(function(){

//when the Add Filed button is clicked

$("#add").click(function (e) {

//Append a new row of code to the "#items" div

$("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>');

});

$("body").on("click", ".delete", function (e) {

$(this).parent("div").remove();

});

We can limit adding additional fields like below:

Limitation

var n = $("#items div").length;
if (n <=5) {
$("#items").append('<div>
<input type="text" name="input[]"><button class="delete">Delete</button></div>
');
}
else{
 alert("Only five additional fields are allowed!")
}

var n = $("#items div").length;

if (n <=5) {

$("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>');

}

else{

alert("Only five additional fields are allowed!")

}

We are checking the length of the divs added inside of the #items div
If it is less than or equal to 5, then we can append another div otherwise we can show an alert.
So totally we can add only 5 additional input fields.
You can set your own limit.
That’s it for the tutorial

jQuery Add/Remove Input Fields Dynamically

By using jquery you can add or duplicate more input fields with delete button near to it and you can remove the filed on delete button click.

HTML Markup

<button id="add">Add Field</button>
<div id="items">
 <div>
<input type="text" name="input[]"></div>
</div>

<button id="add">Add Field</button>

</div>

First we have a single input box inside of a div with the id of “items” and a button which says “Add Field”.
Inside of $(document).ready function place the below jQuery code.

jQuery

//when the Add Field button is clicked
$("#add").click(function (e) {
 //Append a new row of code to the "#items" div
 $("#items").append('<div>
<input type="text" name="input[]"><button  class="delete">Delete</button></div>
');
});

//when the Add Field button is clicked

$("#add").click(function (e) {

//Append a new row of code to the "#items" div

$("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>');

});

Now, whenever you click on “Add Field” a new input field with delete button will be added.
When a delete button is clicked we need to remove the corresponding input field using the below code.

Delete button

$("body").on("click", ".delete", function (e) {
 $(this).parent("div").remove();
});

$("body").on("click", ".delete", function (e) {

$(this).parent("div").remove();

});

That’s it for this tutorial. In next tutorial we will learn how to limit adding input fields.

Subscribe to: Posts ( Atom )

jQuery Add/Remove Input Fields Dynamically with Limit

jQuery

Limitation

Add More Input Fields Using jQuery With Remove Button

HTML Markup

jQuery

Delete button

Popular Posts

Labels

About us

Labels

Translate

jQuery Add/Remove Input Fields Dynamically with Limit

jQuery

Limitation

Share story

Add More Input Fields Using jQuery With Remove Button

HTML Markup

jQuery

Delete button

Share story

Popular Posts

Labels