How to add and remove input fields dynamically using jQuery with Bootstrap ?
In this article, we will learn how to add and remove input fields dynamically using jQuery with Bootstrap. So I will give you a brief on how we are going to achieve this functionality.
In this process, we will use the following multiple functions.
click() Method: The click() is an inbuilt method in jQuery that starts the click event or runs the function passed to it when a click event occurs.
Syntax:
$(selector).click(function);
- Parameter: It accepts an optional parameter “function”, which will run when a click event occurs.
- Return Value: It returns the selected element with the specified function to perform.
Append() Method: The append() method inserts specified content at the end of the selected elements.
Syntax:
$(selector).append(content)
Parameter: It accepts content as a parameter, the parameter can be HTML tags
Remove() Method: Removes the selected element.
Syntax:
$(selector).remove();
Parent() Method: Get the direct parent element of the selected element.
Syntax:
$(selector).parent();
CDN Links:
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”> <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css”> <script src=”//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
Approach:
- Firstly, add the jQuery, and Bootstrap CDN to the script or download them to your local machine.
- Create an input group and add an input field along with a button. i.e. this button will be used to delete this input field.
- Create a button and on clicking this button we will dynamically add the input fields.
- Now write the click() function to handle the adding and removing functionality.
- Use the append() method to add the input field code to the existing HTML document.
$('#newinput').append(newRowAdd);- Use the remove() method to remove the input field from the document.
$(this).parents("#row").remove(); - Add some styling to the page using the bootstrap.
Example: In this example, we will use the above approach.
HTML
<!doctype html><html lang="en"><head> <title>Add or Remove Input Fields Dynamically</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href= <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <style> body { display: flex; flex-direction: column; margin-top: 1%; justify-content: center; align-items: center; } #rowAdder { margin-left: 17px; } </style></head><body> <h2 style="color:green">GeeksforGeeks</h2> <strong> Adding and Deleting Input fields Dynamically</strong> <div style="width:40%;"> <form> <div class=""> <div class="col-lg-12"> <div id="row"> <div class="input-group m-3"> <div class="input-group-prepend"> <button class="btn btn-danger" id="DeleteRow" type="button"> <i class="bi bi-trash"></i> Delete </button> </div> <input type="text" class="form-control m-input"> </div> </div> <div id="newinput"></div> <button id="rowAdder" type="button" class="btn btn-dark"> <span class="bi bi-plus-square-dotted"> </span> ADD </button> </div> </div> </form> </div> <script type="text/javascript"> $("#rowAdder").click(function () { newRowAdd = '<div id="row"> <div class="input-group m-3">' + '<div class="input-group-prepend">' + '<button class="btn btn-danger" id="DeleteRow" type="button">' + '<i class="bi bi-trash"></i> Delete</button> </div>' + '<input type="text" class="form-control m-input"> </div> </div>'; $('#newinput').append(newRowAdd); }); $("body").on("click", "#DeleteRow", function () { $(this).parents("#row").remove(); }) </script></body></html> |
Output:
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Please Login to comment...