onclick event pass li id or value

Question

I want to pass  lt li gt  id or value in onclick event  here is my exiting code    lt li onclick  getPaging this value   id  1  value  1  gt 1 lt  li gt   lt li onclick  getPaging this value   id  2  value  2  gt 2 lt  li gt    here is the javascript code  function getPaging str        loading-content   load  dataSearch php   str  hideLoader

User · Answer

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   x000D   x000D      some-list li   click function     x000D    var textLoaded    Loading element with id   x000D               this  data  id    x000D         loading-content   text textLoaded   x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt ul id  some-list  gt  x000D     lt li data-id  1  gt One  lt  li gt  x000D     lt li data-id  2  gt Two  lt  li gt  x000D     lt  --     more li -- gt  x000D     lt li data-id  n  gt Other lt  li gt  x000D   lt  ul gt  x000D   x000D   lt h1 id  loading-content  gt  lt  h1 gt  x000D   x000D   x000D

User · Answer

Try this    lt li onclick  getPaging this id   id  1  gt 1 lt  li gt   lt li onclick  getPaging this id   id  2  gt 2 lt  li gt    function getPaging str            loading-content   load  dataSearch php   str  hideLoader

User · Answer

Try like this      lt script gt  function getPaging str          loading-content   load  dataSearch php   str  hideLoader      lt  script gt    lt li onclick  getPaging this id   id  1  gt 1 lt  li gt   lt li onclick  getPaging this id   id  2  gt 2 lt  li gt    or unobtrusively    function          li   on  click  function         showLoader            loading-content   load  dataSearch php   this id  hideLoader               using just   lt li id  1  gt 1 lt  li gt   lt li id  2  gt 2 lt  li gt

User · Answer

lt li gt 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  lt li gt 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    lt li class  clickMe  gt 1 lt  li gt   lt li class  clickMe  gt 2 lt  li gt    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  lt li class  clickMe  gt s  without requiring you to duplicate your onclick  getPaging this value   code for each of them

[jquery] onclick event pass <li> id or value

A example

Examples related to jquery

Examples related to events

Examples related to onclick

Examples related to html-lists