in this session we will see how to create a dynamic html input field using jQuery .
Required Resources Links:
https://code.jquery.com/jquery-3.2.1.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js
Preview:
Source Code:
<html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Privacy Policy - DynamicUi</title> </head> <body> <div class="container"> <main role="main" class="pb-3"> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link href="/js/drop.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> <link rel="stylesheet" href="/assets/Css/bootstrap.min.css"> <style> element.style { height: 43vh !important; } span.select2-dropdown.select2-dropdown--below { height: 150px !important; } .select2-container--default .select2-results > .select2-results__options { height: 103px !important; } </style> <br> <br> <br> <div class="container"> <div class="ui-widget "> <div class="col-12"> <div class="row"> <div class="table-responsive"> <form id="dynamic_form" method="post" action="/"> <span id="result"></span> <table class="table table-bordered table-striped" id="user_table"> <thead> <tr> <th width="35%"> CustomerNo </th> <th width="35%"> Customer Name </th> <th width="35%"> Invoice Date </th> </tr> </thead> <tbody> <tr> <td> <input type="text" name="InvoiceNo" class="form-control"> <span class="text-danger field-validation-valid" data-valmsg-for="InvoiceNo" data-valmsg-replace="true"></span> </td> <td> <select style="width:250px !important" class="js-example-responsive form-control col-md-4" id="customername" name="customername[]" required=""> <option selected="selected" value="one">Choice 1</option> <option value="two">Choice 2</option> <option value="three">Choice 3</option> </select> <span class="text-danger field-validation-valid" data-valmsg-for="Vendrname" data-valmsg-replace="true"></span> </td> <td> <input type="date" name="Date" class="form-control"> <span class="text-danger field-validation-valid" data-valmsg-for="Date" data-valmsg-replace="true"></span> </td> </tr> </tbody> </table> <span id="result"></span> <table class="table table-bordered table-striped" id="user_table"> <thead> <tr> <th>Order Name</th> <th>Quantity</th> <th>ExpiryDate</th> <th>Actions</th> </tr> </thead> <tbody class="data-add-product"> </tbody> <tfoot> <tr> <td colspan="3" align="right"> </td> <td style="float: right;"> <input type="submit" name="save" id="save" class="btn btn-primary" value="Save"> </td> </tr> </tfoot> </table> </form> </div> </div> </div> </div> </div> <script> $(document).ready(function () { var count = 1; dynamic_field(count); function dynamic_field(number) { html = '<tr>'; html += '<td class="widfix" ><select style="width:250px !important" id="Product_' + count + '" onclick="myFunction(' + count + ')" name="ProductName" class="js-example-responsive form-control Product" /></select><br/> <span asp-validation-for="ProductName" class="text-danger"></span></td>'; html += '<td><input type="number" min="0" name="Quantity" class="form-control " /><br/> <span asp-validation-for="Quantity" class="text-danger"></span></td>'; html += '<td><input type="date" name="ExpiryDate" class="form-control" /><br/> <span asp-validation-for="ExpiryDate" class="text-danger"></span></td>'; if (number > 1) { html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>'; $('.data-add-product').append(html); myFunction(count); } else { html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>'; $('.data-add-product').html(html); } } $(document).on('click', '#add', function () { count++; dynamic_field(count); }); $(document).on('click', '.remove', function () { count--; $(this).closest("tr").remove(); }); }); </script> <script> $(document).ready(function () { $("#Vendrname").select2({ }); }); </script> </main> </div> </body></html>
Latest posts by DuttaluruVijayakumar (see all)
- How to create dynamic form fields using jQuery - January 4, 2021
- What is CTS (Common Type System) in .Net - October 16, 2020
- What is main method in c# - October 13, 2020