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>
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
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
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