Get value from defined <td> (ASP.NET MVC)

Question

I have View where I show some data via table

Here is code

 @foreach (var item in Model)
    {
        <tr >
            <td class="point">
                @(rowNo += 1)
            </td>
            <td style="text-align: center; font-size: 18px;">
                @Html.DisplayFor(modelItem => item.Email)
                @Html.Hidden("clientEmail", item.Email)
            </td>
            <td style="text-align: center; font-size: 18px;">
                @Html.DisplayFor(modelItem => item.UserName)
            </td>
            <td style="text-align: center; font-size: 18px;">
                @Html.DisplayFor(modelItem => item.Position)
            </td>
            <td style="text-align: center; font-size: 18px;">
                @Html.DisplayFor(modelItem => item.Company.CompanyName)
            </td>
            <td style="text-align: end;">


                <button type="submit" id="send" class="sendinviteclass" style="color: white">Отправить приглашение</button>

I have button with id="send" and I need to get Email by it via JS.

My trouble in that - I can have for example 5 rows in table and so I can have 5 buttons.

How I can get value from email what I need via JS?

UPDATE

Here is page source code

 <div style="padding-left: 70px; padding-bottom: 20px;">
            <p>
                <a href="/">
                    <img src="/images/logo.png" alt="image" height="100px" width="110px">
                </a>
            </p>
        </div>
        <div class="navbar">
            <div class="container" style="position: relative">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!--<a class="navbar-brand" href="/">Видео Интрервью</a>-->
                </div>
                <div class="navbar-collapse collapse center-block">

                    <ul class="nav navbar-nav">


                        <li><a href="/Companies">Компании</a></li>
                        <li><a href="/Interwier/Approved">Подтвержденные</a></li>
                        <li><a href="/InvitationMails/Individual">Приглашения</a></li>
                        <li><a href="/Questions/WelcomeScreen">Создать интервью</a></li>
                        <li><a href="/Interwier/Viewing">Просмотр</a></li>
                        <li><a href="/Interwier/Incoming">Входящие</a></li>
                        <li><a href="/Interwier/Archive">Архив</a></li>
                    </ul>
                    <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="6_mqaCf427P4eDczunVjASai_ZRrITyXFFtIwygRva6gR8Mr5nNZJqU8IBwTbt_HYx8bjjz81WHzLkbljebv6iALVFrIFh7N-KDi3rc6nJ_o8m3fYOsciskGTOX6stGRPop_D7qr240jQ2disCDSkg2" />        <ul class="nav navbar-nav navbar-right">
            <li>

            </li>
            <li><a href="javascript:document.getElementById('logoutForm').submit()">Выйти</a></li>
        </ul>
</form>
                </div>
            </div>
        </div>
        <div class="container body-content">





<form action="/Clients/SendEmail" method="post"><form action="/Clients" method="post">    <table class="table">

        <tr style="background: #d1d3d4">
            <th></th>
            <th style="font-size: 20px; text-align: center;">
                Email
            </th >
            <th style="font-size: 20px; text-align: center;">
                Клиент
            </th>
            <th style="font-size: 20px; text-align: center;">
                Должность
            </th>
            <th style="font-size: 20px; text-align: center;">
                Компания
            </th>
         <th></th>
        </tr>
        <tr>
            <td style="height: 40px; width: 40px; background: red;">
                <a href='/Clients/Create'>
                    <img style="object-fit: cover;" src='/Images/plus.png'/>
                </a>
            </td>
        </tr>
            <tr >
                <td class="point">
                    1
                </td>
                <td class="email_text" style="text-align: center; font-size: 18px;">
                    [email protected]
                    <input id="clientEmail" name="clientEmail" type="hidden" value="[email protected]" />
                </td>
                <td style="text-align: center; font-size: 18px;">
                    Сухомлин Евгений
                </td>
                <td style="text-align: center; font-size: 18px;">
                    C# Developer
                </td>
                <td style="text-align: center; font-size: 18px;">
                    Фокстрот
                </td>
                <td style="text-align: end;">


                    <button type="button" onclick="sender()" data-email="[email protected]" id="email"  class="sendinviteclass" style="color: white">Отправить приглашение</button>


                    <a href='/Clients/Edit/2033'>
                        <img src='/Images/Edit.png'/>
                    </a>
                    <!-- <a class="editclass" href="/Clients/Edit/2033">Редактировать</a>-->
                    <a href='/Clients/Delete/2033'>
                        <img src='/Images/Delete.png'/>
                    </a>

                </td>
            </tr>

    </table>
</form><script>
    function sender(element) {
        $(element).data('email');
        alert(email);
      }
</script>

User3250 · Accepted Answer · 2017-05-30 09:28:06Z

1

Add data- prop to your button like:

<button type="submit" id="send" onclick="sender(this)" data-email="@item.email" class="sendinviteclass" style="color: white">Отправить приглашение</button>

And in JS:

var email = $(this).data('email')

Assuming this is your button.

edited May 30, 2017 at 9:28

answered May 30, 2017 at 9:04

User3250

3,4536 gold badges34 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

S.E Over a year ago

data('email') concerns to data-email?

User3250 Over a year ago

Yes. It get data-email property value

S.E Over a year ago

look. I write code like this in button

<button type="button" onclick="sender()" data-email="@item.Email" id="email"  class="sendinviteclass" style="color: white">Отправить приглашение</button>

and like this in script

<script>         function sender () {           var email = $(this).data('email')           alert(email);       } </script>

And I get undefined

User3250 Over a year ago

Check my latest edit also function sender () should be function sender (element) var email = $(element).data('email') alert(email);

S.E Over a year ago

Have question. When paste you code, I have [object HTMLButtonElement]

|

Collectives™ on Stack Overflow

Get value from defined <td> (ASP.NET MVC)

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related