call function for each element in a foreach using jQuery

Question

I have a view-model which has a data grid like the one shown below

<table>
@foreach (var item in Model)
                        //for(int i=0;i<Model.Count();i++)
                        {
                            using (Html.BeginForm("Edit", "Views", FormMethod.Post))
                            {
                                <tr>
                                    <td>
                                        @Html.TextBoxFor(modelItem => item.Description, new { id = "description" })

                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.DisplayAt, new { id = "displayat" })
                                    </td>
                                    <td>
                                        @Html.DropDownListFor(m => item.selectedRegion, item.RegionsList, item.Region, new { id = "ddlregion" })
                                    </td>
                                    <td>
                                        @Html.DropDownListFor(modelItem => item.Products, item.ProductsList, item.Products, new { id = "ddlproduct" })
                                    </td>
                                    <td>

                                        @Html.DropDownListFor(modelItem => item.Companies, item.CompaniesList, item.Companies, new { id = "ddlcompany" })
                                    </td>
                                    <td>

                                        @Html.DropDownListFor(modelItem => item.UserName, item.UserNamesList, item.UserName, new { id = "ddlusers" })
                                    </td>
                                    <td>

                                        @Html.CheckBoxFor(modelItem => item.Visible, new { id = "chkVisible" })
                                    </td>
                                    <td>                                            
                                        <input type="submit" value="Edit" id="button" />
                                    </td>

                                </tr>

                            }
                        }
</table>

I have written a jquery function to work on the click of the button with id=button

However, it works only for the first row. When I click on the buttons from the second row the function is not being called. How do I write a jquery which will be called when any of the buttons is clicked.

My jQuery code:

    $('#button').click(function () {
                    var product = $("#ddlproduct").find("option:selected").text();
                    var user = $("#ddlusers").find("option:selected").text();
                        *does something*
                        });

This is being called only for the first row. I'm assuming there is something like a foreach button with id that is clicked.

Ids are expected to be unique per page, by web standards. Use a class instead. — Taplar, Jun 26 '18 at 16:36
Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Jun 26 '18 at 16:36
A class is just a different way of identifying an element. And element can have `id="something"` and `class="something"` and both can be looked up with a javascript selector. The only difference is ids are expected to be unique, while classes are not. — Taplar, Jun 26 '18 at 16:39

score 2 · Accepted Answer · answered Jun 26 '18 at 16:42

Once you change your ids to classes so they are not restricted to being unique, you can look up your related elements contextually.

$('.button').click(function () {
    //get a reference to the row that contains the button that was clicked
    var $contextualRow = $(this).closest('tr');
    var product = $contextualRow.find(".ddlproduct").find("option:selected").text();
    var user = $contextualRow.find(".ddlusers").find("option:selected").text();

    *does something*
});

shahburhan · Answer 2 · 2018-06-26T16:52:06.960

0

Give the button a class instead of the ID. <button class="button">Submit</button>

That will trigger the event each time the button with class button is clicked.

$('.button').click(function () {
                *does something*
                });

To get the values of your selects, you can go about doing it contextually just like Taplar wrote or you can select the parent of the button and go about its children:

var parent = $(this).parent().parent();
var product = $(".ddlproduct", parent).val();
var user = $(".ddlusers",  parent).val();

Dont forget to change those IDs to classes.

edited Jun 26 '18 at 16:52

answered Jun 26 '18 at 16:38

shahburhan

224
1
12

Absolutely, what was I thinking. Thanks for pointing this out. – shahburhan Jun 26 '18 at 16:47
Yes, just saw that. – shahburhan Jun 26 '18 at 16:52

call function for each element in a foreach using jQuery

2 Answers2