ASP.Net Core MVC multiply dynamically added TextBoxes in HTML Table row and display in another using jQuery

leila398
 
on Dec 23, 2021 07:05 AM
1455 Views

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>

 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Dec 24, 2021 11:29 AM
on Dec 28, 2021 12:57 AM

Hi leila398,

On keyUp event of TextBoxes you need to reference the TextBoxes for that row.

Then calculate and set the value in the 3rd TextBox.

Use below script.

JavaScript

<script>
    $(document).ready(function () {
        $('body').on('keyup', "#txtNetUnitPrice, #txtQuantity", function () {
            var row = $(this).closest('tr');
            var netUnitPrice = $(row).find('[id*=txtNetUnitPrice]').val();
            if (isNaN(netUnitPrice) || netUnitPrice == "") {
                netUnitPrice = 0;
            }
            var quantity = $(row).find('[id*=txtQuantity]').val();
            if (isNaN(quantity) || quantity == "") {
                quantity = 0;
            }
            $(row).find('[id*=txtTotalNet]').val(parseFloat(netUnitPrice) * parseFloat(quantity));
        });
        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++;
        });

        $("table.order-list").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();
            counter -= 1
        });
    });
</script>