Jquery data attribute value undefined

Question

HTML:

<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal()"><i class="fa fa-envelope"></i></button>

jQuery:

function show_modal(){
    alert($(this).data("type"));
    $('#basic').modal('show'); 
}

Output:

Undefined

Expected Output:

Invoice Generate

Anyone can please tell me why it alerting undefined and How can I resolve it?

Answer 1

You show_modal function don't know what $(this) is. so add this to onclick="show_modal()" like onclick="show_modal(this)"

Then you, of course, has to update your function as well as below:

function show_modal(obj){
    alert($(obj).data("type"));
    $('#basic').modal('show'); 
}

 function show_modal(obj){ alert($(obj).data("type")); $('#basic').modal('show'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal(this)"><i class="fa fa-envelope"></i></button> 

Answer 2

you are calling function you have to pass this will function like

<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal()"><i class="fa fa-envelope"></i></button>

And in JS

function show_modal(ob){
    alert($(ob).data("type"));
    $('#basic').modal('show'); 
}

Answer 3

Or if you want to use $(this) attach an event handler to the element using it's class or id like this..

$('.filter-submit').on('click', function(){
  alert($(this).data("type"));
})

 $('.filter-submit').on('click', function() { alert($(this).data("type")); //$('#basic').modal('show'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate"><i class="fa fa-envelope"></i>Show</button> 

Answer 4

Hope this is your solution

<button class="btn btn-sm green btn-outline filter-submit margin-bottom" data-type="Invoice Generate" onclick="show_modal(this)"><i class="fa fa-envelope"></i></button>

<script>
   function show_modal(ele){

      alert($(ele).data("type"));
      $('#basic').modal('show'); 
   }
</script>