Add remove multiple input fields dynamically with jquery

Key Points


  • This application will give you two dynamically associated input fields side by side with add and remove button.In first field give the name and in the second field give its value.
  • Dynamic names for each input field using array so that dynamic input field values can be captured easily on submit button to insert it in the database.
  • Beautiful Design using Bootstrap
  • Code customisation is easy as per your requirement.

Output of the code


add dynamic input field

 

I have divided the code in three separate files for better understanding and we will discuss each file one by one. File names are :-

  • dynamic.html
  • dynamic.css
  • dynamic.js

dynamic.html


First create the main page with the name dynamic.html

Head section contains

  • Title
  • Jquery link
  • Bootstrap links
  • dynamic.css file link
  • dynamic.js file link

Body section contains

  • Bootstrap classes with bootstrap panel for creating box styled form.
  • Html form with add and delete button for input field

dynamic.css


This file contains css for

  • Setting body background color.
  • Centring the form.
  • Setting the panel(inside the centered-form) box shadow and background color.

dynamic.js


This file has three sections:-

  • First section shows all the variables.
  • Second section contain the code to add a new input field on add button click event.
  • Third section contains the code to delete the field on remove button click event.

First Section

  • I have set counter to 0 using variable x.It will be used in second section to increase this counter by one for each add button click.When this counter reaches 10,addition will not happen.
  • I have limit the number of fields that can be added to 10 using the list_maxField variable.User will not be able to add more than 10 fields.

Second Section

This section will work when the add button is clicked.

  • First it checks if counter x is less than list_maxField  variable.
  • If above condition is true, it increases the x counter by one.
  • Then it creates a variable where it stores the complete html div for adding new row as a input field in the form.
  • Finally using append function it adds new field to the existing list_wrapper class div.

Third Section

This section will work when the remove button is clicked.

  • Remove button gets activated when you add an extra field after the first field row.
  • When list_remove_button inside list_wrapper class is clicked this code runs and removes the closest div row using remove function.
  • After removing the field, counter x decreases by one.

So just save the above three files on your system and run the code. You will see the beautiful UI and the option to add and delete the input fields dynamically.
What do you think about this code? Please share your thoughts in the comments.

4 thoughts on “Add remove multiple input fields dynamically with jquery

  1. Robin

    Thanks.I am able to implement it easily within my code.

    Reply
    1. admin Post author

      You can give the page url in the form action attribute where you want the form values to be sent after clicking on submit button.

      Reply
  2. Matt

    Awesome! This little piece is exactly what I needed to solve my problem:

    $(this).closest(‘div.row’).remove();

    I modified it to match my classes. It works great!

    Thanks!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *