onclick event pass <li> id or value

Question

I want to pass <li> id or value in onclick event. here is my exiting code.

<li onclick="getPaging(this.value)" id="1" value="1">1</li>
<li onclick="getPaging(this.value)" id="2" value="2">2</li>

here is the javascript code

function getPaging(str)
{
$("#loading-content").load("dataSearch.php?"+str, hideLoader);
}

Answer 1

Try like this...

<script> function getPaging(str) {   $("#loading-content").load("dataSearch.php?"+str, hideLoader); } </script>  <li onclick="getPaging(this.id)" id="1">1</li> <li onclick="getPaging(this.id)" id="2">2</li> 

or unobtrusively

$(function() {   $("li").on("click",function() {     showLoader();     $("#loading-content").load("dataSearch.php?"+this.id, hideLoader);   }); }); 

using just

<li id="1">1</li> <li id="2">2</li> 

Answer 2

<li>s don't have a value - only form inputs do. In fact, you're not supposed to even include the value attribute in the HTML for <li>s.

You can rely on .innerHTML instead:

getPaging(this.innerHTML)

Or maybe the id:

getPaging(this.id);

---

However, it's easier (and better practice) to add the click handlers from JavaScript code, and not include them in the HTML. Seeing as you're already using jQuery, this can easily be done by changing your HTML to:

<li class="clickMe">1</li>
<li class="clickMe">2</li>

And use the following JavaScript:

$(function () {
    $('.clickMe').click(function () {
        var str = $(this).text();
        $('#loading-content').load('dataSearch.php?' + str, hideLoader);
    });
});

This will add the same click handler to all your <li class="clickMe">s, without requiring you to duplicate your onclick="getPaging(this.value)" code for each of them.

Answer 3

I prefer to use the HTML5 data API, check this documentation:

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
• https://api.jquery.com/data/

A example

$('#some-list li').click(function() {
  var textLoaded = 'Loading element with id='
         + $(this).data('id');
   $('#loading-content').text(textLoaded);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='some-list'>
  <li data-id='1'>One </li>
  <li data-id='2'>Two </li>
  <!-- ... more li -->
  <li data-id='n'>Other</li>
</ul>

<h1 id='loading-content'></h1>