Get values from multiple div with jquery

Question

I have some jquery question : I generate with php loop a list of div. I would like when I click on 1 div, print alert with the value of the div.

First my html (result of php loop) code :

<div id="unlink_1" class="unlink_table" value="1" />
<img src="images/picto-table-unlink.png" />
</div>

<div id="unlink_2" class="unlink_table" value="2" />
<img src="images/picto-table-unlink.png" />
</div>

<div id="unlink_3" class="unlink_table" value="3" />
<img src="images/picto-table-unlink.png" />
</div>

My jquery code :

$(".unlink_table").click(function(){
    var test = $(".unlink_table").val();
    alert(test);
});

For that moment it doesn't work (alert empty)

Thank you !

in layman's language..jQuery doesn't know that for $(".unlink_table").val(); which unlink_X divs value needs to be picked...so you need this to point it out! :) — NoobEditor
– NoobEditor, Commented Nov 5, 2014 at 9:38

Bhushan Kawadkar · Accepted Answer · 2014-11-05 09:34:27Z

4

Try this : Inside click event you have to use $(this) to refer to clicked element. You were calling $(".unlink_table").val(); which will try to call val() for all element with class="unlink_table". Also .val() will not work for div, you have to use .attr('value').

$(".unlink_table").click(function(){
    var test = $(this).attr('value');
    alert(test);
});

DEMO

answered Nov 5, 2014 at 9:34

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

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

3 Comments

vaso123 Over a year ago

div has no val(); should use html(); instead.

vaso123 Over a year ago

Thats ok now. Thanks for the fix.

Nunners Over a year ago

+1 One of the few people who actually read the question before answering.

demonofthemist · Accepted Answer · 2014-11-05 09:40:16Z

1

To select the element on which you currently clicked, you should use $(this) function in your event handler.

No value attribute is available for div tag. use data attributes instead.

HTML:

<div id="unlink_3" class="unlink_table" data-value="3" />
    <img src="images/picto-table-unlink.png" />
</div>

jQuery

$(".unlink_table").click(function(){
    var test = $(this).attr('data-value');
    alert(test);
});

OR you can ad a hidden input in each div.

HTML:

<div id="unlink_3" class="unlink_table" />
    <input type="hidden" value=3" />
    <img src="images/picto-table-unlink.png" />
</div>

jQuery

$(".unlink_table").click(function(){
    var test = $(this).find('input').val();
    alert(test);
});

answered Nov 5, 2014 at 9:40

demonofthemist

4,1894 gold badges29 silver badges46 bronze badges

Comments

Shoaib Chikate · Accepted Answer · 2014-11-05 09:37:04Z

0

There is no value attribute for div

$(".unlink_table").click(function(){
    //var test = $(this).html();
    //or
    var test= $(this).attr("value");

    alert(test);
});

answered Nov 5, 2014 at 9:37

Shoaib Chikate

8,97112 gold badges50 silver badges70 bronze badges

1 Comment

Bhushan Kawadkar Over a year ago

You can use attr('value') as value is defined in html for div

George · Accepted Answer · 2014-11-05 09:39:02Z

0

No value method available for block element (DIVS) use HTML

 $(".unlink_table").click(function(e){
    var abc= $(this).html();
    alert(abc);
  });

edited Nov 5, 2014 at 9:39

George

36.9k9 gold badges70 silver badges109 bronze badges

answered Nov 5, 2014 at 9:38

Suraj Rawat

3,76326 silver badges33 bronze badges

Comments

Grzegorz P. · Accepted Answer · 2014-11-05 09:39:07Z

0

you can also use somethig like this.

$('.unlink_table').on('click',function(){ 
var test = $(this).html();
alert(test);
});

this is very helpful when your using ajax calls because it keep DOM alive.

answered Nov 5, 2014 at 9:39

Grzegorz P.

771 gold badge1 silver badge7 bronze badges

Comments

Rakesh Sharma · Accepted Answer · 2014-11-05 09:44:06Z

0

try with $(this).attr() you have added attribute value to div so get with attr() and $(this) refer to current div

$(".unlink_table").click(function(){
   var val = $(this).attr('value');
   alert(val);
});

edited Nov 5, 2014 at 9:44

answered Nov 5, 2014 at 9:37

Rakesh Sharma

13.7k5 gold badges41 silver badges44 bronze badges

Comments

gaauspawcscwcj · Accepted Answer · 2014-11-05 09:57:54Z

0

you can try this one :

$("div[id^='unlink_']").click(function(){
    alert($(this).attr("id"));
});

answered Nov 5, 2014 at 9:57

gaauspawcscwcj

31 bronze badge

Comments

Tristup · Accepted Answer · 2014-11-05 10:12:24Z

0

      $(".unlink_table").click(function(){
         var test = $(".unlink_table").attr('value');
         alert(test);
      });

Hope the above code will work for you. As DIV does not have the "VALUE" attribute in it you can't print it using val() method. I would like to request you to use data-val instead of value and use the following code :

        $(".unlink_table").click(function(){
         var test = $(".unlink_table").data('val');
         alert(test);
      });

answered Nov 5, 2014 at 10:12

Tristup

3,6381 gold badge16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Get values from multiple div with jquery

8 Answers 8

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related