jquery pull data from html attribute on click

Question

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>

Adil Shaikh · Accepted Answer · 2013-06-14 16:29:17Z

2

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

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

answered Jun 14, 2013 at 16:29

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

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

1 Comment

Colin Over a year ago

Ah! Thank you all. Just one of those dirt simple things that wizz past your head. Can I tag this '#brainfart'? :)

PSL · Accepted Answer · 2013-06-14 16:29:44Z

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

WooCaSh · Accepted Answer · 2013-06-14 16:30:06Z

0

just simple change your code to:

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

answered Jun 14, 2013 at 16:30

WooCaSh

5,2225 gold badges39 silver badges55 bronze badges

Collectives™ on Stack Overflow

jquery pull data from html attribute on click

3 Answers 3

1 Comment

Markup

Script

Demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Markup

Script

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related