CODEWITHSUNDEEP
javascriptjqueryhtml
ELEx
ELEx

Reputation: 21

jQuery unable to get full value attribute from li (list) element

HTML source where I want to get the "entire" value from:

<li title="child-.11 02 C" class="dragable second" value="160|.11 02 C" style="">.11 02 C Dach Rohrgerüst 0,7m</li>

This js code does not what I was expecting on list elements but works on selectbox options:

$(document).on('click','select#ArtikelNr, ul#dragableElements li.selected',function() {
    $('.product-txt').remove('');
    // Get ID Example [FIRST IDENTIFIER]|[[FIRST IDENTIFIER]
    var prodNr = $(this).val();
    console.log(prodNr)

It just gives me "160".

Even if I change separator to [/] or [-] or [ ] the problem still the same. My first thought was was trimming whitespaces and other non alphnum characters but I had no luck with that either.

Using: jquery-1.8.3.min.js jquery-ui-1.9.2.custom.min.js

Any idea?

kindest ELEx

Upvotes: 1

Views: 5819

Answers (2)

Samuel Liew
Samuel Liew

Reputation: 79032

You cannot use value for li elements to contain anything OTHER than numbers.

Quoted from moz-docs:

The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

Therefore, you should not use this attribute to store data.

If you want, you could use the data-attribute instead:

<li title="child-.11 02 C" class="dragable second" data-value="160|.11 02 C">.11 02 C Dach Rohrgerüst 0,7m</li>

To get the value, use:

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

Demo: http://jsfiddle.net/samliew/ZgMze/

Upvotes: 6

Rohan Kumar
Rohan Kumar

Reputation: 40639

val is not working for li

Use

var prodNr = $(this).attr('value');

Read http://api.jquery.com/val

Alternative

You can use data like,

<li title="child-.11 02 C" data-value="160|.11 02 C" style="">.11 02 C Dach Rohrgerüst 0,7m</li>

JS

var prodNr = $(this).data('value');

Docs http://api.jquery.com/data

Upvotes: 1

Related Questions