by DuttaluruVijayakumar Updated : Jan 04, 2021 in Articles

How to create dynamic form fields using jQuery

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:

jQuery UI Autocomplete – Default functionality

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">&nbsp;</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>

Author
Recent Posts

DuttaluruVijayakumar

hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more

by DuttaluruVijayakumar Updated : Jan 04, 2021 in Articles

How to create dynamic form fields using jQuery

Related Posts: