Why does attribute value of input = text, but attribute value of li = number?

Question

http://jsfiddle.net/3GTtF/2/

<ul>
    <li class="first" value="45">fortyfive</li>
    <li class="second" value="4text5">45</li>
</ul>

<input value="45">

---

var whatIsValue = $('.first').val();            //  = 45     typeof = number
var whatIsSecondValue = $('.second').val();     //  = 4      typeof = number
var whatIsInputValue = $('input').val();        //  = '45'   typeof = string

Why does var whatIsSecondValue = 4 instead of '4text5'

Why does var whatIsInputValue = '45' instead of 45

Answer 1

As for the WHY i'm not sure but a li tag shouldn't have a value attribute. You should use data-* attribute instead. It is invalid/improper HTML syntax.

As shown below

<ul>
    <li class="first" data-value="45">fortyfive</li>
    <li class="second" data-value="4text5">45</li>
</ul>


var whatIsValue = $('.first').data('value');
var whatIsSecondValue = $('.second').data('value'); // = 4text5 typeof = string
var whatIsInputValue = $('input').val();

Update

Apparently in HTML5 once can use a value attribute, see comments below. In that case to solve this you could use the .prop() or .attr() methods.

Another Update

Because in HTML5 the value attribute on a li is of type integer/number by default. As to why it trims the string to 4, that's a mystery.

Answer 2

If you're gonna use .val() incorrectly, you'll get strange results.

If you're set on using value="" in an li, to access it you must use .attr("value")

see the updated fiddle http://jsfiddle.net/3GTtF/3/

Answer 3

when you do parseInt('4text5') it also returns 4 because that's how this function works. http://www.w3schools.com/jsref/jsref_parseint.asp

I guess jqueries val() method is using parseInt somewhere but I'm not sure. It sure is something similar.

Also it make sense that the value of a list is an integer and the value of an input field (type text) is a string. isn't it?

javascript/jquery probably doesn't check the type you actually put in the field. If you want a number from an input field you need to set the type to number <input type="number"> thats why there are that many "meaningful" html elements. javascript expects that you use these elements for what they are designed for.

The way the value is extracted (as string, number, date etc) is depended on the HTML (or other markup language).

So the more I think about it the more it makes sense that the .val() method is returning a particular "type" depending on the dom element type.

• li -> default value is integer (it is a list with a defined number of li elements so it would be odd/strange that it would be a string)
• input[text] -> string
• input[number] -> integer

Answer 4

You can use the getAttribute method: http://jsfiddle.net/chace/t2HCH/61/

var new1Txt = $(".first").text();
var new1Val = $(".first").val();
var new2Txt = $(".second").text();
var new2Val = $(".second").val();
var new2Real = x = document.getElementsByClassName("second");
var new2JQ = $(".second");

$(document).ready(function () {

    $(".container").append("<p>" + new1Txt + "</p>");
    $(".container").append("<p>" + new1Val + "</p>");
    $(".container").append("<p>" + new2Txt + "</p>");
    $(".container").append("<p>" + new2Val + "</p>");
    $(".container").append("<p>" + new2Real[0].getAttribute('value') + "</p>");
    $(".container").append("<p>" + new2JQ[0].getAttribute('value') + "</p>");

});