Hello,
I have the following code which contains a function for multiplying 2 textboxes and populating the answer in a third textbox.
The other function dynamically adds a row of textboxes in addition to the original row.
How can I apply my multiply function to the dynamically added rows as well in asp.net core mvc?
Thanks
<script>
$(document).ready(function () {
//multiply
$("#txtNetUnitPrice, #txtQuantity").keyup(function () {
$("#txtTotalNet").val($("#txtNetUnitPrice").val() * $("#txtQuantity").val());
});
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input id="txtName" type="text" class="form-control" name="txtName' + counter + '" /></td>'
cols += '<td><input id="txtDescription" type="text" class="form-control" name="txtDescription' + counter + '" /></td>';
cols += '<td><select id="ddlDepartment" class="form-control" name="ddlDepartment' + counter + '">';
cols += '<option value="0" selected>Select</option>';
cols += '<option value="Support">Support</option>';
cols += '<option value="IT ">IT</option>';
cols += '<option value="Accounts">Accounts</option>';
cols += '</select></td >';
cols += '<td><input id="txtQuantity" type="text" class="form-control" name="txtQuantity' + counter + '" /></td>';
cols += '<td><input id="txtVatRate" type="text" class="form-control" name="txtVatRate' + counter + '" /></td>';
cols += '<td><input id="txtNetUnitPrice" type="text" class="form-control" name="txtNetUnitPrice' + counter + '" /></td>';
cols += '<td><input id="txtTotalNet" type="text" class="form-control" name="txtTotalNet' + counter + '" /></td>';
cols += '<td><button type="button" class="ibtnDel btn btn-md btn-danger "><i class="fa fa-trash-o"></i></button></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
<body class="container">
<div class="form-row">
<div class="form-group col-md-6">
<label for="Requested_By">Requester Full Name</label>
<input type="text" class="form-control" id="Requested_By" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="Requester_Email">Requester Email</label>
<input type="text" class="form-control" id="Requester_Email" placeholder="">
</div>
</div>
<div class="form-group">
<label for="Delivery_Address_Line1">Delivery Address</label>
<input type="text" class="form-control" id="Delivery_Address_Line1" placeholder="">
</div>
<div class="form-group">
<label for="Delivery_Address_Line2">Address 2</label>
<input type="text" class="form-control" id="Delivery_Address_Line2" placeholder="">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="Delivery_Address_Town">City/Town</label>
<input type="text" class="form-control" id="Delivery_Address_Town">
</div>
<div class="form-group col-md-4">
<label for="Delivery_Address_County">County</label>
<select id="Delivery_Address_County" class="form-control">
<option selected>Choose...</option>
<optgroup label="England">
</select>
</div>
<div class="form-group col-md-2">
<label for="Delivery_Address_Postcode">Postcode</label>
<input type="text" class="form-control" id="Delivery_Address_Postcode">
</div>
<div class="form-row">
<div class="col">
<label asp-for="Order_Date" class="control-label"></label>
<input asp-for="Order_Date" class="form-control" />
<span asp-validation-for="Order_Date" class="text-danger"></span>
</div>
<div class="col">
<label asp-for="Delivery_Date" class="control-label"></label>
<input asp-for="Delivery_Date" class="form-control" />
<span asp-validation-for="Delivery_Date" class="text-danger"></span>
</div>
</div>
<div class="col">
<label asp-for="Payment_Terms" class="control-label"></label>
<input asp-for="Payment_Terms" class="form-control" />
<span asp-validation-for="Payment_Terms" class="text-danger"></span>
</div>
</div>
<br />
<hr />
<br />
<h3>Supplier Details:</h3>
<br />
<div class="form-row">
<div class="form-group col-md-6">
<label for="SupplierName">Supplier Name</label>
<input type="text" class="form-control" id="Supplier_Name" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="Supplier_Contact_Person">Contact Person</label>
<input type="text" class="form-control" id="Supplier_Contact_Person" placeholder="">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="Supplier_Phone">Supplier Phone Number</label>
<input type="text" class="form-control" id="Supplier_Phone" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="Supplier_Email">Supplier Email</label>
<input type="text" class="form-control" id="Supplier_Email" placeholder="">
</div>
</div>
<div class="form-group">
<label for="Supplier_Address_Line1">Address</label>
<input type="text" class="form-control" id="Supplier_Address_Line1" placeholder="">
</div>
<div class="form-group">
<label for="Supplier_Address_Line2">Address 2</label>
<input type="text" class="form-control" id="Supplier_Address_Line2" placeholder="">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="Supplier_Address_Town">City</label>
<input type="text" class="form-control" id="Supplier_Address_Town">
</div>
<div class="form-group col-md-4">
<label for="Supplier_Address_County">County</label>
<select id="Supplier_Address_County" class="form-control">
<option selected>Choose...</option>
<optgroup label="England">
</select>
</div>
<div class="form-group col-md-2">
<label for="Supplier_Address_Postcode">Postcode</label>
<input type="text" class="form-control" id="Supplier_Address_Postcode">
</div>
</div>
<br />
<hr />
<br />
<h3>Item Details:</h3>
<br />
<div>
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Item Name</td>
<td>Description</td>
<td>Department</td>
<td>Quantity</td>
<td>Vat Rate</td>
<td>Net Unit Price</td>
<td>Total Net</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-2">
<input asp-for="Item_Name" id="txtName" class="form-control" />
<span asp-validation-for="Item_Name" class="text-danger"></span>
</td>
<td class="col-lg-4">
<input asp-for="Description" id="txtDescription" class="form-control" />
<span asp-validation-for="Description" class="text-danger"></span>
</td>
<td class="col-md-2">
@Html.DropDownListFor(model => model.Department,
new List<SelectListItem> {
new SelectListItem { Value = "Support" , Text = "Support" },
new SelectListItem { Value = "IT" , Text = "IT" },
new SelectListItem { Value = "Accounts" , Text = "Accounts" },
}, "Select",
new { @id = "ddlDepartment", @class = "form-control" })
</td>
<td class="col-sm-1">
<input asp-for="Quantity" id="txtQuantity" class="form-control" />
<span asp-validation-for="Quantity" class="text-danger"></span>
</td>
<td class="col-sm-1">
<input asp-for="Vat_Rate" id="txtVatRate" class="form-control" />
<span asp-validation-for="Vat_Rate" class="text-danger"></span>
</td>
<td class="col-sm-1">
<input asp-for="Net_Unit_Price" id="txtNetUnitPrice" class="form-control" />
<span asp-validation-for="Net_Unit_Price" class="text-danger"></span>
</td>
<td class="col-md-1">
<input asp-for="Total_Net" id="txtTotalNet" class="form-control" />
<span asp-validation-for="Total_Net" class="text-danger"></span>
</td>
<td class="col-md-4">
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="12" style="text-align: left;">
<input id="btnSubmit" type="submit" value="Submit Form" class="btn btn-primary" />
</td>
<td colspan="12" style="text-align: right;">
<button type="button" id="addrow" class="btn btn-info add-new"><i class="fa fa-plus"></i>Add New Item Row</button>
</td>
</tr>
</tfoot>
</table>
<br />
<br />
</div>
</body>
</html>
