CODEWITHSUNDEEP
javascriptjqueryhtml
Jc John
Jc John

Reputation: 1859

why cant get the value of <a> tag from html

I don't know whats the problem of my JavaScript or my code.
I can't get the data-value of an <a> tag from HTML.
I don't know what's wrong because I am just a beginner in JavaScript.

I have a loop where I have many categories in my website and I put a value of id from my <a> tag.
Here is the code:

<div class="list-group">
  <?php foreach($data as $single_data) { ?>
  <a href="#" id="target" data-value="<?php echo $single_data->Category_id; ?>" class="list-group-item"><?= $single_data->Category_name ?></a>
  <?php } ?>
</div>

When i go to show page source it looks good and look like this:

<a href="#" id="target" data-value="1" class="list-group-item">Gadgets</a>
<a href="#" id="target" data-value="2" class="list-group-item">Books</a>

Now here is my JavaScript:

$("#target").click(function() {
    var value = $(this).data("value");
    alert(value);
});

Upvotes: 0

Views: 620

Answers (4)

davidxxx
davidxxx

Reputation: 131346

you need to change two things :

  • id of elements have to be unique
  • bound each element with a click() function.

And html side :

<a href="#" id="targetGadget" data-value="1" class="list-group-item">Gadgets</a>
<a href="#" id="targetBook" data-value="2" class="list-group-item">Books</a>

JS side :

$("#targetGadget").click(function() {
    var value = $(this).data("value");
    alert(value);
});
$("#targetBook").click(function() {
    var value = $(this).data("value");
    alert(value);
});

Now, from JS side, to not repeat yourself, a better way would be to add <a> elements in a div in the html side and in the js dynamically applying the click() function for each of <a> child of the div.

Here is an example :

html :

div id="targets">
  <a href="#" id="targetGadget" data-value="1" class="list-group-item">Gadgets</a>
  <a href="#" id="targetBook" data-value="2" class="list-group-item">Books</a>
</div>

js :

var children = $("#targets").get(0).children;
for (var i = 0; i < children.length; i++) {
    var child = children[i];
    $(child).click(function() {
        var value = $(this).data("value");
        alert(value);
    });
}

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

IDs are always unique. You CANNOT have same ID to different DOM elements. In that case, assign them a class.

Changed the ID to class, and accordingly made change in JS code: 

$(".target").click(function() {
  var value = $(this).data("value");
  alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="target list-group-item" data-value="1">Gadgets</a>
<a href="#" class="target list-group-item" data-value="2">Books</a>

Upvotes: -1

Arpit Svt
Arpit Svt

Reputation: 1203

Id of the tag should be unique
You can do something like

<a href="#" id="target1" data-value="1" class="list-group-item">Gadgets</a>
<a href="#" id="target2" data-value="2" class="list-group-item">Books</a>

Or if you want to capture click event for both anchor tags you can use class selector instead

$(".list-group-item").click(function() {
    var value = $(this).data("value");
    alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="target" data-value="1" class="list-group-item">Gadgets</a>
<a href="#" id="target" data-value="2" class="list-group-item">Books</a>

Upvotes: 1

brk
brk

Reputation: 50291

id need to be unique. You can use class as a selector in your problem

$(".list-group-item").click(function() {
  var value = $(this).data("value");
  alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-value="1" class="list-group-item">Gadgets</a>
<a href="#" data-value="2" class="list-group-item">Books</a>

Upvotes: 1

Related Questions