Get value of span with jquery

Question

OK, so I am working on a web project with Spring boot and use Thymeleaf as templating engine and in one page I have the following:

[...]<span   th:switch="${cost.achitat}" class="pull-right">                                    
  <span th:case='true'  class="btn btn-xs btn-default" >
    <span class="glyphicon glyphicon-remove" aria-hidden="true" th:value="${cost.cost_id}"></span>
  </span> 
  <span th:case='false' class="btn btn-xs btn-default">
    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  </span> 
</span>[...]

(the "achitat" parameter of the object is boolean and I have a th:each in a higher div, and if i set the text with th:text it displays correctly on my page, so the value is being transmited)

I am trying to get the value of the span inside the true case with jquery:

$(document).ready(function(){
$('.glyphicon.glyphicon-remove').click(function(){
    var t = $(this).val();
    alert(t);
});});

But the alert is always empty. I know that this question has been asked before in some form or another, but I could not find a solution and I don't know what I'm doing wrong.

Thanks!

span element don't have a value. You can get their inner text with text() or their inner html with html() — Taplar
Here is link for your requirement. stackoverflow.com/questions/1921342/… — Mudassar Ali

Sulung Nugroho Sulung Nugroho · Accepted Answer · 2018-05-29T22:55:55

Note that only input has a value. Others you must use data attribute.

<span class="glyphicon glyphicon-remove" aria-hidden="true" th:attr="data-value=${cost.cost_id}"></span>

    $(document).ready(function(){
    $('.glyphicon.glyphicon-remove').click(function(){
        var t = $(this).data('value'); // if int the use parseInt() function;
        var t = paerseInt($(this).data('value'));
        alert(t);
    });});

Get value of span with jquery

1 Answers