Retrieve data from specified <td> element in an ASP.NET MVC application

Within my View, I am displaying data using a table.

Below is the code snippet:


        @foreach (var item in Model)
        {
            <tr >
                // Table row content here...
            </tr>
        }
    

I have buttons with unique identifiers, such as id="send", and I need to extract the associated email value using JavaScript. The challenge arises when there are multiple rows with corresponding buttons.

How can I efficiently retrieve the specific email value via JS?

UPDATE

Here is a segment of the page's source code:


        <div class="container body-content">
            // Additional HTML markup...
            
            <table class="table">
                // Table content here...
            </table>

            <script type="text/javascript">
                function grabEmail(element) {
                    var email = $(element).data('email');
                    alert(email);
                }
            </script>
        </div>
    

Answer №1

To include data- attributes in your button, add a prop like this:

<button type="submit" id="send" onclick="sender(this)" data-email="@item.email" class="sendinviteclass" style="color: white">Send Invitation</button>

Then, in your JS code:

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

This assumes that this refers to your button element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Since switching to PHP 5.5 from version 3.x, I have noticed that it is attempting to interpret my JavaScript comment within a script tag in a PHP include file

After a long break from working with PHP, I recently encountered an issue with an older website I built using PHP and the include function. The site was functioning perfectly until the web host updated PHP to version 5.5, causing a strange bug where it see ...

jquery global variable not working as expected

I'm having trouble making some variables global outside the jQuery function. I've tried using 'var' to declare them first and then assigning values, but when I try to log() them at the end, I get undefined. var lat, lon; $.get('ip ...

What is the best way to eliminate the nesting in this ternary operation?

Object.values(filter).filter(item => (Array.isArray(item) && item.length > 0) || (typeof item === "boolean" && item === true) || (item !== null)).length ? filterIcon : unFilledIcon In this code, I aim to simplify the nested ternary operator and ...

Fade out effect in jQuery upon reloading the page

Is there anyone who can assist me with this issue? The following script snippet allows a user to delete records from a table connected to a mySQL database. <script type="text/javascript> $(document).ready(function(){ $('form.delete ...

Validating ReactJS properties

Transitioning from ReactJs to React-Native, I came across this function structure in a react-native button code by Facebook: class Button extends React.Component<{ title: string, onPress: () => any, color?: ?string, hasTVPreferredFocus?: ?bo ...

Ways to dynamically combine a group of objects

I'm grappling with a challenge involving an array containing two objects. After using Promise All to fetch both of these objects, I've hit a roadblock in trying to merge them dynamically. Despite experimenting with various array methods like map, ...

Ways to verify audio in several HTML5 video files

I am working on a way to determine if multiple videos have audio or not. Here is an example of what I have so far: https://jsfiddle.net/hrd4a0c3/ However, my current solution only checks one video at a time. I am looking for a way to extend this functiona ...

Tips for displaying a message in the model body when a bootstrap model does not have any data in jQuery

Having trouble displaying a text message in the Bootstrap modal body when there is no data available in the model. I have multiple cards in the model, and if I click on the skip or done buttons, each card will close. However, if there is only one card in t ...

Access scope information when clicking with ng-click

I am currently using a php api to update my database, but I want the ability to choose which item gets updated with ng-click. app.controller('ReviewProductsController', function ($scope, $http) { $scope.hide_product = function () { ...

Steps to enable editing in an array

I'm struggling to implement an editing functionality for the lists inside the ul element in my simple to-do list project. Currently, I have the delete functionality working but need guidance on how to add an edit function. The list items are added by ...

Dropdown for state selection within WooCommerce for specific countries

I am encountering a challenge in configuring a form with default WooCommerce country and states selection dropdowns. Essentially, my goal is to present the Country selection first, followed by the State selection based on the chosen country. For instance, ...

What is the best way to obtain the output produced by a function when a button is clicked

When I click on a button, the desired action is to trigger a function that adds a new property inside an object within a large array of multiple objects. This function then eventually returns a new array. How can I access and utilize this new array? I am ...

Modify KeyboardDatePicker to display the full name of the day and month

Date Selector Hey there, I'm looking to modify the date format from Wed, Apr 7 to Wednesday, April 7. Is there a way to display the full name of the day and month instead of the short abbreviation? ...

Refreshing a variable following an AJAX request in AngularJS

My approach in angularjs is to utilize a factory for handling database calls. var app = angular.module('myApp', []); app.factory("Service", function ($http) { var obj = {}; $http.get('test.txt').then(function (data) { obj.getAp ...

Technique for updating URL when submitting a form on a webpage

I'm a newcomer to the world of coding and I have a simple issue that needs fixing. I want to create a form field where users can input the last segment of a URL provided to them. After entering this segment, I want the page to refresh automatically a ...

Is it possible to incorporate spread syntax(...) within a vue.js 2.x template?

Is it possible to utilize a similar structure in a vue.js template? <template> <vxe-table> <vxe-column v-for="options in someConsts" ...options width="160"> </vxe-column> </vxe-ta ...

tips for sorting through options in a chosen dropdown menu

Attempting to categorize and sort items from a dropdownlist. A selection SQL statement has been crafted within the XML table for filtering purposes. Here are the corresponding codes. The designated filter is labeled TreatmentGroup. The XML table containin ...

Limit the scope of addClass() to immediate children and not descendants

Looking at the code below: <div class="menu"> <a href="#" class="dropdown-item">Link 1</a> <a href="#" class="dropdown-item">Link 2</a> <ul class="hamburgerMenu__menu--levelTwo"> <li><a href="#" ...

Using Highmaps in a VueJs application involves passing a state to the mapOptions for customization

I'm currently struggling with passing a vuex state to mapOptions in vuejs components. Here is the code snippet: <template> <div> <highcharts :constructor-type="'mapChart'" :options="mapOptions" class="map">&l ...

SOLVED: NextJS restricts plugins from modifying HTML to avoid unnecessary re-rendering

My current scenario is as follows: I am in the process of developing a website using NextJS (SSR) I have a requirement to load a script that will locate a div element and insert some HTML content (scripts and iframes) within it. The issue at hand: It se ...