[14th_Doctor]

I'm trying to figure this out, and I've tried a few ways this morning, but can't quite nail it.

Let's say I have this input code below...

<input type="submit" class="btn2" id="btn2" value="btn2" data-key1="fbi" data-key2="cia"/><br>

What I want to do with jQuery is search for both data-key elements, and return their values in an alert box. I've been looking through jQuery's API for assistance in searching attributes, but nothing seems to apply.

This is my latest past without the .click functionality. Any help figuring out how to accomplish this would be appreciated.

Thanks.

$('#data-key').text()

function check () {
    var content = 
document.getElementById("data-key").innerText;
alert(content);
}
  });
});

[astonecipher]

document.getElementById("data-key").innerText;

This wouldn't work because the id is not 'data-key'.


You could grab the attribute, but for it to work you would need the actual attribute name, not a subset.

[14th_Doctor]

You're right, I didn't even think about that, when I wrote up that variation. I need to grab the attribute, what can I use to get that?

This post has been edited by andrewsw: 31 August 2014 - 02:27 PM
Reason for edit:: Removed previous quote, just press REPLY

[astonecipher]

jQuery .Attr()
SO

[andrewsw]

jQuery data() is what jQuery uses to retrieve data-attribute values.

[14th_Doctor]

andrewsw, on 31 August 2014 - 02:26 PM, said:

jQuery data() is what jQuery uses to retrieve data-attribute values.

From what I'm reading on data, it looks like I'd need 2 buttons one to attach the data, and one to push the data out in the alert, or can I put both into one button?

[astonecipher]

Look at their example,

<script>
$( "button" ).click(function() {
  var value;
 
  switch ( $( "button" ).index( this ) ) {
    case 0 :
      value = $( "div" ).data( "blah" );
      break;
    case 1 :
      $( "div" ).data( "blah", "hello" );
      value = "Stored!";
      break;

How would you add an alert to that?

[14th_Doctor]

See looking at their example, they have 1 button to see the div, and 3 buttons that each either pull information or remove information from it.

I would think, it would be something akin to

$( "button" ).click(function() {
  var value;
value = $( "data-key" ).data

But I know that's not it.

This post has been edited by andrewsw: 31 August 2014 - 03:26 PM
Reason for edit:: Removed previous quote, just press REPLY

[astonecipher]

Consider this modification of their example,

case 1 :
   $( "div" ).data( "blah", "hello" );
   value = "Stored!";
   alert("The value of \"blah\" is " + value);
   break;

or in your case,

<div data-key="val">A div</div>

case 1 :
   value = $( "div" ).data( "key");
   alert("The value of \"blah\" is " + value);
   break;