HelloI have the following code which contains a function for multiplying 2 textboxes and populating the answer in a third textboxThe other function dynamically adds a row of textboxes in addition to the original rowHow can I apply my multiply function to the dynamically added rows as well in aspnet core mvcThanksltscriptgt documentreadyfunction multiply 34txtNetUnitPrice txtQuantity34keyupfunction 34txtTotalNet34val34txtNetUnitPrice34val 34txtQuantity34val var counter 0 34addrow34on34click34 function var newRow 34lttrgt34 var cols 3434 cols 39lttdgtltinput id34txtName34 type34text34 class34formcontrol34 name34txtName39 counter 3934 gtlttdgt39 cols 39lttdgtltinpu

Hi leila398On keyUp event of TextBoxes you need to reference the TextBoxes for that rowThen calculate and set the value in the 3rd TextBoxUse below scriptJavaScriptltscriptgt documentreadyfunction 39body39on39keyup39 34txtNetUnitPrice txtQuantity34 function var row thisclosest39tr39 var netUnitPrice rowfind39idtxtNetUnitPrice39val if isNaNnetUnitPrice netUnitPrice 3434 netUnitPrice 0 var quantity rowfind39idtxtQuantity39val if isNaNquantity quantity 3434 quantity 0 rowfind39idtxtTotalNet39valparseFloatnetUnitPrice parseFloatquantity var counter 0 34addrow34on34click34 function var newRow 34lttrgt34

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

Answered

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

Answer

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>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html