Form creation: input widgets, data binding, and data validation - HTML5 in Action - page 73

fulness of valueAsNumber was questioned on a W3C mailing list, HTML5 editor Ian
Hickson provided a use case where the valueAsNumber property was much more con-
cise than parseFloat —incrementing the value of a field programmatically. Here's an
example:

field . valueAsNumber += 1 ; //HTML5 version

field . value = ( parseFloat ( field . value ) + 1 ). toString () //Fallback version

Step 2: Retrieve the value of quantity input fields

In the order form example, you'll use the valueAsNumber property to get the value of
the quantity fields for each product row in the Order Details section. Inside the empty for
loop from listing 2.7 , add the following code.

Listing 2.8. app.js—Getting the value of the quantity input fields

Next you'll learn how to read HTML5 data-* attribute values to get the prices for each
of the items, and then you'll implement it in the sample application.

2.3.2. Accessing values from HTML5 data-* attributes

Earlier, you learned how to bind key/value pair data to elements using the new data-*
attributes in HTML5. This information is useful when you want to add extra data to an ele-
ment that can be easily picked up and used in your JavaScript code. It's straightforward to
read data-* attributes—each element has a dataset property that contains all of the
data-* attributes for that element. Each of the items in the dataset property has a key
name that matches the key name in the element markup, with the data- prefix dropped.
In listing 2.4 you defined the item's price using the data-price attribute. To retrieve
that value, you can use the following code:

var price = element . dataset . price ;