0

Hey all i am trying to get the value of the clicked custom radio button that ive made.

Here is the js for the button:

$("#df-opt0,#df-opt1,#df-opt2,#df-opt3,#df-opt4").click(function (input) {
    $('#df-opt0').css("background-image", "url(img/radiobutton-OFF.png)");
    $('#df-opt1').css("background-image", "url(img/radiobutton-OFF.png)");
    $('#df-opt2').css("background-image", "url(img/radiobutton-OFF.png)");
    $('#df-opt3').css("background-image", "url(img/radiobutton-OFF.png)");
    $('#df-opt4').css("background-image", "url(img/radiobutton-OFF.png)");
    //alert($(this).attr('id'));
    $('#' + $(this).attr('id')).css("background-image", "url(img/radiobutton-ON.png)");
    //globalRadioSelected = $(this).attr('id');

    fValue =  $(input).attr("store-id");
    alert('the ID :'+fValue);
});

And this is the HTML:

<div id="df-opt0" store-id="100"></div>
<div id="df-opt1" store-id="200"></div>
<div id="df-opt2" store-id="300"></div>
<div id="df-opt3" store-id="400"></div>
<div id="df-opt4" store-id="500"></div>
<div id="df-opt4txt" store-id="600">
    <input type="text" id="df-opt4txt-txt" style="width: 130px;" class="formBoxes">
</div>

What i get when i click on any of them is: the ID : undefined

What am i missing?

StealthRT
  • 10,108
  • 40
  • 183
  • 342
  • It might be worth using the `data-` attribute rather than just a custom attribute. e.g. using `data-store-id`. If you read this SO post you will see why http://stackoverflow.com/questions/7261619/jquery-data-vs-attr – Tim B James Oct 04 '12 at 15:18

2 Answers2

1

Do fValue = $(this).attr("store-id"); not fValue = $(input).attr("store-id");.

The argument passed to your click handler function is the click event itself which obviously does not have a store-id attribute.

The this object will be the same as input.target (the target DOM element for the click event) in this situation.

Sidharth Mudgal
  • 4,234
  • 19
  • 25
1

You should use "this" ala:

fValue =  $(this).attr("store-id");
user1026361
  • 3,627
  • 3
  • 22
  • 20