Working a page of buttons which populates a textarea with the value of the buttons.

This works fine for items that are buttons, but cannot get it working for list items.

I have to use a list item since some buttons have a drop down.

jsfiddle shows the list item alerting 0 even thought it does have a value.

/

<li class='item_value' value='value'>
  <a href='#'>Click</a>
</li>

<br><br>

<button type='button' class='btn btn-success item_value' value='value2'>Click 2</button>

jQuery:

$(".item_value").on('click',function(){
  alert(this.value);
});

Working a page of buttons which populates a textarea with the value of the buttons.

This works fine for items that are buttons, but cannot get it working for list items.

I have to use a list item since some buttons have a drop down.

jsfiddle shows the list item alerting 0 even thought it does have a value.

http://jsfiddle/hsw32zv8/

<li class='item_value' value='value'>
  <a href='#'>Click</a>
</li>

<br><br>

<button type='button' class='btn btn-success item_value' value='value2'>Click 2</button>

jQuery:

$(".item_value").on('click',function(){
  alert(this.value);
});

• javascript
• jquery
• html
• list

4 Answers 4

value is not a valid attribute for the li element (unless it's in an ol, but that seems unlikely given your issues and the fact the value of the attribute you had was a string not a number), nor does the DOMElement for that tag type have a value property.

Adding non-standard attributes to your markup will render the page invalid and may lead to JS and UI problems. If you want to create a custom attribute, use data-*:

<li class="item_value" data-value="value">
    <a href="#">Click</a>
</li>

$('.item_value').on('click', function(){
    alert($(this).data('value')); // = 'value'
});

li element doesn't have value attribute. However if you still want to get it use attr method:

$( this ).attr( 'value' );

jsFiddle

A list item <li> haves a value but it only takes numbers (note they should be in an <ol>). You gave a string (at interpreted that as 0) so for example:

<li class='item_value' value='1010'>
    <a href='#' value="test">Click</a>
</li>

Will show up as a value of 1010. You can get around this by adding a data- attribute instead: data-value="someStringHere"

just modified your this.value to $(this).attr('value').

so the plete code:

$(".item_value").on('click',function(){
    alert($(this).attr('value'));
});

hopefully helping