CODEWITHSUNDEEP
javascriptjquerydom
jaeko44
jaeko44

Reputation: 84

Get ID of selected button using JavaScript

Currently I have a list of options (Which can be selected through clicking the button next to the option.)

The following is the JavaScript code when I click the button.

    $('.step3').click(function() {
        var os_name = $('.step3').attr('id');
        alert(os_name);
        var os_update;
        os_update ="nothing so far";
        if (os_name == "os_c_5_64") {
        os_update = "centos-5-x86_64";
        }
        if (os_name == "os_c_6_64") {
        os_update = "centos-6-x86_64";
        }
        if (os_name == "os_c_65_64") {
        os_update = "centos-6.5-x86_64";
        }

        alert(os_update);
        $('#vmos').val(os_update).change();
    });

What I'm trying to do is get the ID of the actual selected button - Not directly from the class.

                       <tr class="appliance">
                            <td class="distro"><img src="<?=$this->tpl_asset_path;?>images/centos.jpg"></td>
                            <td class="description">Centos 5 64bit</td>
                            <td class="author">Linux distribution</td>
                            <td class="text-right"> <li class="step3" id="os_c_5_64" style="list-style: none;"><a class="btn btn-primary create" data-toggle="tab" href="#step3">Select</a></li></td>
                        </tr>

                        <tr class="appliance">
                            <td class="distro"><img src="<?=$this->tpl_asset_path;?>images/centos.png"></td>
                            <td class="description">Centos 6 64bit</td>
                            <td class="author">Linux distribution</td>
                            <td class="text-right"> <li class="step3" id="os_c_6_64" style="list-style: none;"><a class="btn btn-primary create" data-toggle="tab" href="#step3">Select</a></li></td>
                        </tr>
                        <tr class="appliance">
                            <td class="distro"><img src="<?=$this->tpl_asset_path;?>images/centos.png"></td>
                            <td class="description">Centos 6.5 64bit</td>
                            <td class="author">Linux distribution</td>
                            <td class="text-right"> <li class="step3" id="os_c_65_64" style="list-style: none;"><a class="btn btn-primary create" data-toggle="tab" href="#step3">Select</a></li></td>
                        </tr>

What's the best way to find the ID of the button I just clicked.

I'm currently using: var os_name = $('.step3').attr('id'); Which simply isn't working.

Upvotes: 1

Views: 150

Answers (5)

Alnitak
Alnitak

Reputation: 339786

Within your jQuery event handler (or in handlers registered with addEventListener) you can just use this to access the clicked element and therefore the below to get its ID:

var os_name = this.id;

It's completely portable and maximally efficient.

Please do not be tempted to use $(this).attr('id'). A console.trace for that is shown below:

f.extend.propjquery.min.js:2
f.extend.attrjquery.min.js:2
e.extend.accessjquery.min.js:2
f.fn.extend.attr

This shows that just the .attr call alone requires a further three function calls internally, and that's even before you account for the overhead of calling $(this).

Using $(this).attr('id') replaces a trivial property look up with at least five function calls!

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Within a jQuery event handler the this keyword will refer to the element which raised the event.

As such, you can use either this.id or $(this).prop('id');. Note however that the former is by far the better practice.

Upvotes: 1

Kleigh
Kleigh

Reputation: 424

In Javascript you can generally get an Element by Id using:

document.getElementById("myButton")

if you have assigned it an Id. If you have you might also be able to modify your code a little and use something like this:

<script>
  function getValue()
  {
    var x=document.getElementById("myHeader");
    alert(x.innerHTML);
  }
</script>

Here is some more details.

Upvotes: -1

Alexander
Alexander

Reputation: 11

Are you using jQuery as well? Try:

$(this).attr('id');

Upvotes: 0

leopik
leopik

Reputation: 2351

Use this.id instead or the jQuery version $(this).attr("id")

Upvotes: 1

Related Questions