CODEWITHSUNDEEP
jquerycustom-attributes
Colin
Colin

Reputation: 113

jquery pull data from html attribute on click

I'm trying to create a simple way to pull information from a custom HTML attribute when I have multiple buttons to click with the same 'id'.

I'd like to know if I can pass the 'url' attribute value from the specific button I press. Right now, it always just grabs the first one...

Code:

<script>
$(document).ready(function() { 
    $(":input[id='alarm']").click(function() {
        alert($("input[url]").attr("url"));
    });
});
</script>

<table id='alarms'>
    <th>ID</th>
    <th>CaseID</th>
    <th>Alarm</th>

    <tr>
        <td width="50">2040</td>
        <td width="180">TEST-111110-123-R4</td>
        <td><input id="alarm" type="button" value="Cancel" url="../silencealarm.php?id=2040"></td>
    </tr>
        <td width="50">2042</td>
        <td width="180">TEST-111110-123-R6</td>
        <td><input id="alarm" type="button" value="Cancel" url="../silencealarm.php?id=2042"></td>
    </tr>
</table>

Upvotes: 0

Views: 800

Answers (3)

WooCaSh
WooCaSh

Reputation: 5212

just simple change your code to:

$(document).ready(function() { 
    $(":input[id='alarm']").click(function() {
        alert($(this).attr("url")); //or
        alert($(this).prop("url"));
    });
});

Upvotes: 0

PSL
PSL

Reputation: 123739

While using the custom HTML attribute prefix with data-* and inside your handler this refres to the element itself so just access it with $(this).data("url")

 $(":input[id='alarm']").click(function() {
        alert($(this).data("url"));
    });

Do not use duplicate id, It makes your HTML invalid and your handler will be attached only to the first instance, SO change it to class instead.

Markup

<tr>
        <td width="50">2040</td>
        <td width="180">TEST-111110-123-R4</td>
        <td><input class="alarm" type="button" value="Cancel" data-url="../silencealarm.php?id=2040"></td>
    </tr>
        <td width="50">2042</td>
        <td width="180">TEST-111110-123-R6</td>
        <td><input class="alarm" type="button" value="Cancel" data-url="../silencealarm.php?id=2042"></td>
    </tr>

Script

$(":input.alarm").click(function() {
        alert($(this).data("url"));
});

Demo

Upvotes: 2

Adil Shaikh
Adil Shaikh

Reputation: 44740

use this (don't use duplicate id's though)

$(document).ready(function() { 
    $(":input[id='alarm']").click(function() {
        alert($(this).attr("url"));
    });
});

Upvotes: 2

Related Questions