"Discover the method of extracting data from a hidden field within a td element using jQuery

I'm currently working with a dynamic table and facing an issue retrieving the value of a hidden field called order_id. The problem is that I am only able to get the value of the first id even when clicking on buttons in other rows. Here is the code snippet I am using :

<tr>
    <td>id</td>
</tr>
<tr>
    <td>
        <input type="hidden" id="hid" value="<?php echo $id; ?>">
        <input type="button" id="sends" value="Send" onclick="sendemails();">
    </td>
</tr>

<script>
    function sendemails(){
        var sends = $('#sends').val();
        var hid = $('#hid').val();
        alert(hid);
    }
</script>
javascriptjqueryhtmlcss

Answer №1

You have the option to utilize an alternative approach 

<tr>
    <td>id</td>
</tr>
<tr>
    <td>
        <input type="hidden" id="unique_id" value="<?php echo $id; ?>">
        <input type="button" id="sends" value="Send" onclick="sendemails(<?php echo $id; ?>);">
    </td>
</tr>
<script>
function sendemails(unique_id){
    alert(unique_id);
}
</script>

Additionally, it is important to recognize that the "id" attribute must be unique.

Answer №2

The problem arises from the duplication of a particular row in the table, causing both the button and input IDs to be repeated throughout the page, resulting in an invalid structure. To resolve this issue, it is recommended to use classes, bind events using JavaScript, and then traverse the DOM to locate the corresponding hidden input. Consider implementing the following approach:

<tr>
    <td>id</td>
</tr>
<tr>
    <td>
        <input type="hidden" class="hid" value="<?php echo $id; ?>" />
        <input type="button" class="sends" value="Send" />
    </td>
</tr>

$(function() {
    $(document).on('click', '.sends', function() {
        var sends = $(this).val();
        var hid = $(this).prev().val();
        alert(hid);
    });
});

It's important to note that a delegated event handler was employed due to the dynamic nature of the table creation mentioned.

Answer №3

Make sure to include "this" within the onclick event like this: onclick="sendEmails(this);" and utilize it in your function.

Attempt the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td>id</td>
</tr>
<tr>
    <td>
        <input type="hidden" id="hid" value="hid">
        <input type="button" id="sends" value="Send" onclick="sendEmails(this);">
    </td>
</tr>
</table>
<script>
    function sendEmails(btn){
        var sends = btn.value;
        var hid = $("#" + btn.id).closest("td").find("#hid").val()
        alert(hid)
    }
</script>

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

Classic ASP offers a feature that allows users to select all checkboxes at once

I'm looking to create a functionality where there is a 'Select all' checkbox along with individual checkboxes for each database record. Is it possible to use JavaScript to ensure that when the 'Select all' checkbox is checked, all ...

javascriptasp-classiccheckboxselectall

Loading JSON data from a file in an AngularJS service

Looking to retrieve JSON data from a file named driverStandings.json, which can be found in the structure from the provided image. I am utilizing a service API to fetch this information by using the code displayed below (refer to image). https://i.sstatic ...

javascriptjsonangularjsservice

Attempting to comprehend the reason behind the presence of additional parentheses at the conclusion of a function invocation

Just a quick question I have while experimenting with an example involving OAuth. I want to make sure I fully understand what's going on before incorporating it into my own code. The example uses node, express, and passport-azure-ad. In the code sni ...

javascriptnode.jsexpresssyntaxpassport.js

How to extract a div from its parent using jQuery

I need to stack two div boxes on top of each other, and my goal is to hide the upper one when it's being hovered over. HTML: <div id="left_middle"> <div id="rfinder_UP"></div> <div id="rfinder_DWN"></div> </div> C ...

jquerycss

Transforming objects into nested structures

After making a JSON call, I received the following JSON Object: [ { "feeding_id": 14, "supp_name": "Test 1", "supp_weight": 20000, }, { "feeding_id": 14, "supp_name": "Test 2", "supp_weight": 100 ...

javascriptjqueryarraysjsonobject

Modifying the background hue of a text box within an external stylesheet

I'm currently facing an issue where I need to change the color of a textarea when a radio button is clicked. There are 4 radio buttons, so the textarea should change color 4 times for each button. I am working in reactjs and despite researching the pr ...

javascripthtmlreactjs

The grid is evenly populated with icons

Is it possible to evenly distribute the icons by only using CSS? I'm aiming to achieve a result similar to this (unfortunately, I can't post images due to my lack of reputation). You can find an example solution that uses JavaScript here: _htt ...

csshtmlgridmaterial-designflexbox

Vercel deployment issue: Hidden input values not being detected as expected

Whenever I attempt to update the data on Vercel, an error message is displayed: invalid input syntax for type uuid: "undefined" - unable to save Oddly enough, the data updates successfully when done locally. This is how I submit the form: <form onSu ...

javascriptreactjsnext.jsvercelsupabase

Issue with autoplay feature on Swiper carousel not functioning

I'm in the process of creating a charity website for an organization using a template I obtained from Themeforest (check it out here). Unfortunately, the swiper carousel isn't functioning as expected. Below are the snippets of code found within ...

javascriptjquerybootstrap-4carouselswiper.js

express.js application keeps crashing unexpectedly after running for a while

This express app is designed to be simple yet powerful. However, after sitting idle for a while without any requests, an unexpected error may occur: Example app listening on port 80! events.js:160 throw er; // Unhandled 'error' event ...

javascriptnode.jsexpress

Show material-ui cards in a row side by side

I attempted to showcase cards within a mapping loop while also utilizing the Grid in this manner. <div className={classes.root}> {data.tableData.childRows.map((el: any, idx: number) => { return ( &l ...

cssreactjsflexboxmaterial-ui

How can I add opening quotation marks to every line of text using HTML and CSS?

Is it possible to display a quotation mark at the beginning of each line in a quote using HTML and CSS? In traditional typography, quotes were often marked at every linebreak in addition to the opening and closing of the quote. I want to replicate this on ...

htmlcsstypography

Warning: The file or directory 'C:UsersNuwanstpackage.json' does not exist

Can someone help me with installing socket.io in my project located in the 3.chat folder? I'm encountering some warnings when running the command and it's not creating a node_modules directory. Any suggestions on how to resolve this? C:\Use ...

javascriptnode.jsnpmservernode-modules

creating dynamic parameterized URLs in Laravel

For example: Here are a few names. - Mujib - Amjed - Anees When someone clicks on "Mujib," the URL should remain the same and only the parameter should change. When someone clicks on "Amjed," the URL parameter should change to . ...

javascriptphpjqueryajaxlaravel

Implementing Server-Side Rendering in Angular using Route Resolve

Exploring the possibilities of Server-Side Rendering in Angular (v4) to enhance SEO performance. Everything runs smoothly until the introduction of resolve on the route. The inclusion of resolve leads to the HTML title maintaining its original value when ...

javascriptangulartypescript

Utilizing Vanilla JavaScript to retrieve information from a HTML table

I am currently running my website on XAMPP and I have a database connection set up that I can use. In my database, I have three drop-down menus labeled Translations, Books, and Chapters where the data for each is stored. My goal is to utilize Vanilla JS ...

javascriptmysqlexpress

The footer and login form are tangled up in a web of confusion

Here is my HTML code for a login form: <div class="middle-box text-center loginscreen"> <div> <form class="" role="form" action="index.html"> <div class="form-group&q ...

htmlcsstwitter-bootstrap

Utilizing AJAX to transfer information into a modal window in CodeIgniter

I find it a little embarrassing to admit, but a few months ago I had asked the same question. Unfortunately, I failed to implement it with codeigniter back then. If you're curious, you can check out my old question. My current challenge involves upd ...

javascriptajaxcodeignitermodal-dialogbootstrap-modal

Adjusting the position of the parent div by manipulating the bottom property

Is there a way to toggle the bottom property of a div when clicking its child anchor tag? <div class="nav" :class="{ 'full-width': isFullWidth }"> <a class="toggle-button" @click="toggleNav"><i class="fa fa-angle-down">< ...

javascriptjqueryhtmlcss

A guide on leveraging refs to set props in React JS

Is it possible to change props in my component using refs in react js? <MyComponent ref={'input1'} name={'input1'} label={interestsName} disabled={ false} onChange={this.myFunction}/> After the onChange event, I call a ...

javascriptreactjsmeteorreact-nativeecmascript-6