jQuery form Add/Remove Fields Bootstrap 4 Edition
jQuery form Add/Remove Fields Bootstrap 4 Edition
Easily use Dynamic jQuery form Add/Remove Fields for your website.
Today I'm going to share how to make dynamic input fields using jQuery with add, remove option. multi-input is a jQuery form builder/manipulation plugin which makes it possible to dynamically add and/remove form fields by clicking on Plus and Minus buttons. This tutorial will show you how to dynamically add form elements to a form using jQuery.
HTML Code:
==========================
- <html>
- <head>
- <title>jQuery form Add/Remove Fields Bootstrap 4 Edition</title>
- <!-- bootstrap 4 CDN Link -->
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
- <!-- fontawesome -->
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" />
- </head>
- <body>
- <div class="container my-4">
- <p class="h1">jQuery form Add/Remove Fields – Bootstrap 4 Edition</p>
- <div class="card my-4 shadow">
- <form method="" action="">
- <div class="card col-sm mb-3">
- <div class="card-body">
- <div class="form-group row ">
- <label for="field" class="font-weight-bold ">model test name</label>
- <select class="form-control form-control-sm col-sm-4 ml-3" name="model_test_name_id" >
- <option value="">--select model test name--</option>
- <option value="">model test A</option>
- <option value="">model test B</option>
- <option value="">model test C</option>
- </select>
- </div>
- <div id="dynamic-field-1" class="form-group row dynamic-field">
- <label for="field" class="font-weight-bold mr-1 ">Field 1</label>
- <input type="text" id="field" class="form-control form-control-sm mr-1 col-sm-2" name="model_question[]"value="" placeholder="Input Question Name">
- <input type="text" id="field" class="form-control form-control-sm mr-1 col-sm-2" name="question_choice_a[]" value="" placeholder="Input 1st choice ">
- <input type="text" id="field" class="form-control form-control-sm mr-1 col-sm-2" name="question_choice_b[]" value="" placeholder="Input 2nd choice ">
- <input type="text" id="field" class="form-control form-control-sm mr-1 col-sm-2" name="question_choice_c[]" value="" placeholder="Input 3rd choice ">
- <input type="text" id="field" class="form-control form-control-sm mr-1 col-sm-2" name="question_choice_d[]" value="" placeholder="Input 4th choice ">
- <select id="field" class="form-control form-control-sm mr-1 col-sm-1" name="answer[]" >
- <option value="">Answer</option>
- <option value="1"> 1st choice </option>
- <option value="2"> 2nd choice </option>
- <option value="3"> 3rd choice </option>
- <option value="4"> 4th choice </option>
- </select>
- </div>
- <div class="clearfix mt-4">
- <button type="button" id="add-button" class="btn btn-success btn-sm float-left text-uppercase shadow-sm"><i class="fas fa-plus fa-fw"></i> Add</button>
- <button type="button" id="remove-button" class="btn btn-danger btn-sm float-left text-uppercase ml-1" disabled="disabled"><i class="fas fa-minus fa-fw"></i> Remove</button>
- <button type="submit" class="btn btn-primary btn-sm float-right text-uppercase shadow-sm">Submit</button>
- </div>
- </div>
- </div>
- </form>
- </div>
- </div>
- <!-- jquery-3.3.1 CDN -->
- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
- <!-- cdnjs.cloudflare CDN -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
- <!-- bootstrapcdn CDN -->
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
- </body>
- </html>
jquery code:
===========================
- <script>
- $(document).ready(function() {
- var button_x_Add = $("#add-button");
- var button_x_Remove = $("#remove-button");
- var class_x_Name = ".dynamic-field";
- var count_x = 0;
- var field_x = "";
- var maxFields_x = 5;
- function totalFields() {
- return $(class_x_Name).length;
- }
- function addNewField() {
- count_x = totalFields() + 1;
- field_x = $("#dynamic-field-1").clone();
- field_x.attr("id", "dynamic-field-" + count_x);
- field_x.children("label").text("Field " + count_x);
- field_x.find("input").val("");
- $(class_x_Name + ":last").after($(field_x));
- }
- function removeLastField() {
- if (totalFields() > 1) {
- $(class_x_Name + ":last").remove();
- }
- }
- function enableButtonRemove() {
- if (totalFields() === 2) {
- button_x_Remove.removeAttr("disabled");
- button_x_Remove.addClass("shadow-sm");
- }
- }
- function disableButtonRemove() {
- if (totalFields() === 1) {
- button_x_Remove.attr("disabled", "disabled");
- button_x_Remove.removeClass("shadow-sm");
- }
- }
- function disableButtonAdd() {
- if (totalFields() === maxFields_x) {
- button_x_Add.attr("disabled", "disabled");
- button_x_Add.removeClass("shadow-sm");
- }
- }
- function enableButtonAdd() {
- if (totalFields() === (maxFields_x - 1)) {
- button_x_Add.removeAttr("disabled");
- button_x_Add.addClass("shadow-sm");
- }
- }
- button_x_Add.click(function() {
- addNewField();
- enableButtonRemove();
- disableButtonAdd();
- });
- button_x_Remove.click(function() {
- removeLastField();
- disableButtonRemove();
- enableButtonAdd();
- });
- });
- </script>
Output:
==============================
shelleyakter
So nice post, Thank You.
shelleyakter
So nice post,