Get Dynamically Created TextBox ID From Razor To jQuery

Question

I am trying to get the dynamically created TextBox ID into jQuery from Razor view. The IDs are created in HTML as follows:

Product - 1: cartDetails_0__Quantity
Product - 2: cartDetails_1__Quantity

Right now, when I give the above inputs directly to Ajax call, it updates the corresponding rows. As an example:

 @if (ViewBag.Cart != null)
        {
            for (int i = 0; i < cartDetails.Count(); i++)
            {
                <tr>
                    <td style="text-align: center;">@Html.TextBoxFor(model => cartDetails[i].Id)</td>
                    <td style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].IP)</td>
                    <td style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].ProductName)</td>
                    <td style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].Price)</td>
                    <td style="text-align: center;">@Html.TextBoxFor(model => cartDetails[i].Quantity, new { @class = "quantityUpdate", data_id = cartDetails[i].Id })</td>
                </tr>
            }
        }

var url = '@Url.Action("UpdateCart2")';
$(".quantityUpdate").change(function () {
    var id = $(this).data('id');

    $('.quantityUpdate').each(function (i, item) {
        $.post(url, { id: id, quantity: $('#cartDetails_' + 0 + '__Quantity').val() }, function (response) { //cartDetails_0__Quantity - The first TextBox ID
            if (response) {
                $("#TotalPrice").load(window.location + " #TotalPrice");
            }
        });
    })
    alert($('#cartDetails_' + 0 + '__Quantity').val());
});

Is there any way to loop through jQuery to get the dynamically generated TextBox ID in Razor? I've tried the following but doesn't get the value:

 $('.quantityUpdate').each(function (i, item) {
        $.post(url, { id: id, quantity: $('#cartDetails_' + i + '__Quantity').val() }, function (response) { //cartDetails_0__Quantity - The first TextBox ID
            if (response) {
                $("#TotalPrice").load(window.location + " #TotalPrice");
            }
        });
    })

Even tried this one but it gets the value of first TextBox only:

     $('.quantityUpdate').each(function (i, item) {
        $.post(url, { id: id, quantity: $(this).val() }, function (response) { //cartDetails_0__Quantity - The first TextBox ID
            if (response) {
                $("#TotalPrice").load(window.location + " #TotalPrice");
            }
        });
    })

Note: I am trying to update rows giving input to the TextBoxes with Ajax call. The TextBoxes are in a loop in the view. In this regards, I've to get the IDs of the dynamically generated HTML IDs.

No error at all. Just unable to get the corresponding TextBox ID. — AT-2017, Aug 26 '16 at 08:00
I did a little example here : https://jsfiddle.net/8gh8ugke/ it seems working with ids like yours — Quentin Roger, Aug 26 '16 at 08:03
I've seen your example and it works. But in my case, I am not sure, why it does get the required value I mean not getting the associated TextBox value. It isn't updating the recently given value to the TextBox I mean the quantity. Here is an image that I am trying to do: http://stackoverflow.com/questions/39142704 — AT-2017, Aug 26 '16 at 09:41
I was able to solve it. Just kept the quantity in a variable like this: var quantity = $(this).val(); Now this takes the quantity from the associated TextBoxes. — AT-2017, Aug 28 '16 at 06:24

score 1 · Accepted Answer · edited May 23 '17 at 12:32

You can use create event of dynamically created elements in order to get their Ids. But bear in mind to use this you need to use On(). See http://api.jquery.com/on/

See also: Event binding on dynamically created elements? In jQuery, how to attach events to dynamic html elements?

PS. If there is a cleaner way to get dynamically created elements I would also be glad to get it :)

Edit. Maybe I was not clear enough . There is no exactly "create" event. You just can hook any actions you need to On()

See also jQuery "on create" event for dynamically-created elements

Get Dynamically Created TextBox ID From Razor To jQuery

1 Answers1