how to get data value from html in javascript function?

Question

Hi I'm a beginner of jquery and ajax. This is my code:

.html

<li class="list-group-item">        
    <h2>Vocabulary</h2>
    <h4>
      <span class="label label-success">Like Name</span>  
      <span class="label label-danger">GEPT</span>
      <button type="button" id="collapsible" class="btn btn-default" data-toggle="collapse" data-target="#intro" data-word="good" onclick="loadXMLDoc()">
        <span class="glyphicon glyphicon-plus"></span>
      </button>
    </h4>
    <div class="collapse" id="intro">
      <div class="detail">
        <img src='http://www.michigan.com/assets/images/loading-module.gif'/>
      </div>         
    </div>
  </li>
  <li class="list-group-item">

javascript:

function loadXMLDoc()
{
  var xmlhttp;
  var word = $(this).data("word");
  var path='get_word_detail.php?word='+word;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("intro").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET",path,true);
xmlhttp.send();

}

My page contain a list with many collapsed list items. Every list item containing a button to expand the content of the item.

i want to get the "data-word" from html but it didnt work, Do anyone know how to do it correctly and whether it's possible for me to just pass the parameter from html tag like "onclick="loadXMLDoc("good")"?

Thanks

Anoop Joshi P · Accepted Answer · 2014-02-22 10:37:21Z

1

use attr function of jquery

$("#collapsible").attr("data-word");

EDIT

$(".btn").click(function(){
alert($(this).attr("data-word"));
});

edited Feb 22, 2014 at 10:37

answered Feb 22, 2014 at 9:28

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

3 Comments

Ashley Shen Over a year ago

Thank you for your response. This work for me but i find out that if i have many list-item with button id "collapsible". This will just work for the first item... is there any way to fix it?

Anoop Joshi P Over a year ago

give class same class names for all the buttons then you can access like $(".classname").attr();

Ashley Shen Over a year ago

since I'm using bootstrap so my button's class is "btn btn-default". I modify it like this: var word=$(".btn").attr("data-word"); But it's still the same..only work for the first item... :(

Sridhar Narasimhan · Accepted Answer · 2014-02-22 09:30:05Z

0

you can use the below code

function loadXMLDoc(evt)
{
var element = evt.target;
  var xmlhttp;
  var word = $(element).data("word");
...
}

answered Feb 22, 2014 at 9:30

Sridhar Narasimhan

2,6532 gold badges19 silver badges25 bronze badges

1 Comment

Ashley Shen Over a year ago

I dont know why but this is not working :( I still can't get the word value.

Y.Puzyrenko · Accepted Answer · 2014-02-22 09:46:45Z

0

You are making some mix of jQuery and pure js, try to make it one way. But if you want to launch your load func on click without adding onclick attr to html tag use jQuery:

$(document).ready(function(){
  $('#yourBtnId').click(function(){
     loadXMLDoc();
 })
});

If I correcltly understood the question.

answered Feb 22, 2014 at 9:46

Y.Puzyrenko

2,1951 gold badge16 silver badges23 bronze badges

Collectives™ on Stack Overflow

how to get data value from html in javascript function?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related