Hello friends, today i am going to share with you one tutorial which is dynamic add or remove input fields using jQuery. It’s very simple. Many application have this type functionality to make application more user friendly. In this tutorial, we will first create a add or remove input fields using jQuery then will submit it’s value. So let’s see step by step.
Here is a html form in which we will add or remove input text field using jquery. See the below code.
index.php
<!DOCTYPE html> <html> <head> <title>Add textfield using jquery</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> <!-- Script for Bootstrap JS --> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="form-section"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h2>Dynamically add text field using jquery</h2> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form action="" method="POST" class="form-inline" role="form"> <button type="button" class="btn btn-success add_new_textbox">Add New</button> <div class="dynamic_textbox_block"> <br> <div class="dynamic_textbox_item_1"> <div class="form-group"> <label class="sr-only" for="">label</label> <input type="email" class="form-control dynamic_textbox" id="dynamic_textbox[]" placeholder="Add text here"> </div> </div> </div> <br> <button type="button" class="btn btn-danger" id="submit">Submit</button> </form> </div> </div> </div> </div> </body> <!-- Script for add new textbox --> <script type="text/javascript"> $(".add_new_textbox").click(function(){ var count = 0; var html = ''; $(".dynamic_textbox").each(function(i){ count++; }); html = html + '<div class="dynamic_textbox_item_'+(count+1)+'">'; html = html + '<br>'; html = html + '<div class="form-group">'; html = html + '<label class="sr-only" for="">label</label>'; html = html + '<input type="email" class="form-control dynamic_textbox" id="dynamic_textbox[]" placeholder="Add text here">'; html = html + '</div>'; html = html + '<button type="button" class="btn btn-primary dynamic_button" id="'+(count+1)+'">Remove</button>'; html = html + '</div>'; $('.dynamic_textbox_block').append(html); }); </script> <!-- Remove textbox while click on the remove button --> <script type="text/javascript"> $(document).on('click','.dynamic_button',function(){ var id = $(this).attr('id'); if(id!=1) { $('.dynamic_textbox_item_'+id).remove(); } }); </script> <!-- Get all values while click on submit button --> <script type="text/javascript"> $(document).on('click','#submit',function(){ var value = []; $(".dynamic_textbox").each(function(i){ if($(this).val() != '') { value[i] = $(this).val(); } }); alert(value); }); </script> </html>In the above code, you will see that i use simple html code and some jquery for append the input box dynamically. Here i use jquery’s append() function while adding new text input and remove() function while click on remove button. türk takipçi satın al
I hope that you enjoyed this add or remove input fields dynamically using jquery. If you have any kind of questions regarding this tutorial, please let me know in the comments. I will help you to solve your problem. Please share this tutorial with your friends. Thank you very much 🙂
