Create Add/Remove Multiple Dynamically Input Fields In Javascript Or Jquery

Today, We want to share with you add/remove multiple input fields dynamically with jquery .In this post we will show you Add Remove Multiple Input Fields Dynamically Using Javascript, hear for Dynamically Add Remove Multiple Input Fields with Jquery we will give you demo and example for implement.In this post, we will learn about Dynamically Add Remove multiple input fields in PHP MYSQL with Jquery Ajax with an example.

Create Add/Remove Multiple Dynamically Input Fields in Javascript or Jquery

Contents

Dynamically Add Input Fields And Submit To Database With jQuery and PHP

HTML Code

multiple-input-fields.html




Add Remove Multiple Input Fields Dynamically Using Jquery - www.pakainfo.com








Websites



Email





Numbers



Location

JavaScript Code

fields.js

$(document).ready(function() {
	var max_fields = 15;
	var wrapper = $(".input_fields_wrap");
	var add_button = $(".add_field_button");
	var x = 1; //initlal text box count
	$(add_button).click(function(e){
	e.preventDefault();
	if(x < max_fields){ 
	x++;
	$(wrapper).append('Websites
Email
Numbers
Location
Remove');
	}
	});
	$(wrapper).on("click",".remove_field", function(e){ 
	e.preventDefault(); $(this).parent('div').remove(); x--;
	})
});

Full Source code

index.html


   
      Add Remove Multiple Input Fields Dynamically Using Jquery - www.pakainfo.com
      
   
   
      
         
            
               
                  
                     Websites
                     
                  
                  
                     Email
                     
                  
               
               
                  
                     Numbers

How to add and remove input fields dynamically using jQuery with Bootstrap ?

You can add and remove input fields dynamically using jQuery with Bootstrap by cloning the existing input fields and appending them to the form. Here’s an example:

HTML code:


    Name

jQuery code:

$(document).ready(function(){
    // Add input field on button click
    $('#addInput').click(function(){
        var $inputFields = $('#inputFields');
        var $newInputField = $inputFields.clone();

        // Clear the value of the new input field
        $newInputField.find('input').val('');

        // Append the new input field to the form
        $inputFields.after($newInputField);
    });

    // Remove input field on button click
    $(document).on('click', '.removeInput', function(){
        $(this).closest('.form-group').remove();
    });
});

In the above code, the #inputFields div contains the input field that will be cloned and appended to the form. The Add Input Field button has an ID of #addInput. When this button is clicked, the #inputFields div is cloned and a new input field is appended to the form.

To remove an input field, we use the $(document).on(‘click’, ‘.removeInput’, function(){…} event listener. This event listener is attached to the document and listens for clicks on any element with a class of .removeInput. When an element with this class is clicked, its parent .form-group div is removed.

To add the remove button to each input field, you can add the following code inside the #inputFields div:


    Name

This will add a Remove button next to each input field. When this button is clicked, its parent .form-group div will be removed.

I hope you get an idea about add/remove multiple input fields dynamically with jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Create Add/Remove Multiple Dynamically Input Fields in Javascript or Jquery