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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html> <head> <title>Dynamic Input Fields</title> <!--Jquery Link--> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!-- Bootstrap Styling--> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <!-- custom stylesheet--> <link rel="stylesheet" type="text/css" href="dynamic.css" /> <!-- custom javascript--> <script src="dynamic.js"></script> </head> <body> <div class="container"> <div class="row centered-form"> <div class="col-xs-12 col-sm-8 col-md-8 col-sm-offset-2 col-md-offset-2"> <div class="panel panel-info"> <div class="panel-heading text-center"> <h1 class="panel-title">Add Content</h1> </div> <div class="panel-body"> <form role="form" method="post" action=""> <div class="list_wrapper"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group"> Item Name <input name="list[0][]" type="text" placeholder="Type Item Name" class="form-control"/> </div> </div> <div class="col-xs-7 col-sm-7 col-md-7"> <div class="form-group"> Quantity <input autocomplete="off" name="list[0][]" type="text" placeholder="Type Item Quantity" class="form-control"/> </div> </div> <div class="col-xs-1 col-sm-1 col-md-1"> <br> <button class="btn btn-primary list_add_button" type="button">+</button> </div> </div> </div> <input type="submit" value="Submit" class="btn btn-info btn-block"> </form> </div> </div> </div> </div> </div> </body> </html> |
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.
1 2 3 4 5 6 7 8 9 10 11 |
body{ background-color: #525252; } .centered-form{ margin-top: 100px; } .centered-form .panel{ background: rgba(255, 255, 255, 0.8); box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px; } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(document).ready(function() { var x = 0; //Initial field counter var list_maxField = 10; //Input fields increment limitation //Once add button is clicked $('.list_add_button').click(function() { //Check maximum number of input fields if(x < list_maxField){ x++; //Increment field counter var list_fieldHTML = '<div class="row"><div class="col-xs-4 col-sm-4 col-md-4"><div class="form-group"><input name="list['+x+'][]" type="text" placeholder="Type Item Name" class="form-control"/></div></div><div class="col-xs-7 col-sm-7 col-md-7"><div class="form-group"><input name="list['+x+'][]" type="text" placeholder="Type Item Quantity" class="form-control"/></div></div><div class="col-xs-1 col-sm-7 col-md-1"><a href="javascript:void(0);" class="list_remove_button btn btn-danger">-</a></div></div>'; //New input field html $('.list_wrapper').append(list_fieldHTML); //Add field html } }); //Once remove button is clicked $('.list_wrapper').on('click', '.list_remove_button', function() { $(this).closest('div.row').remove(); //Remove field html x--; //Decrement field counter }); }); |
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.
how to input the data in mysql?
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!
Hi, I would like to program a guessing game so that each digits of user guess number placed in a textbox and if guess number does not match the random number disable all textbox above and create another textbox dynamically and show each digits of new guess number in it.
i do not know how to do this.
kindly give me advice how to add validation with j query
What do u do with the form action ?
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.
Thanks.I am able to implement it easily within my code.