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

Warning

If you hyphenate your data-* attribute names, they'll be camelcased in the dataset
property. For example, if you use the attribute name data-person-name , you'd read
this using rather than

element.dataset.personName

element.dataset.person-name .

The dataset property is new in HTML5, but it's not yet supported in all browsers.
Thankfully, we can show you an easy fallback that'll work on all modern browsers (yes,
even IE6)—the getAttribute method . To get the value of the data-price attribute
using this fallback, you'd use the following code:

var price = element . getAttribute ( 'data-price' );

Step 3: Retrieve price values and calculate line and form totals

In the order form example, let's add some code to get the price of each item and use it to
calculate the total cost for each line by multiplying the quantity by the price, as well as the
total cost for the entire order. Add the code from the following listing right below the code
from the previous listing and before the terminating bracket of the for loop.

Listing 2.9. app.js—Getting the price values using data-* attributes

Now that you've calculated the totals for each item and the overall order total, all that's left
is to display these values on the form using <output> elements. By writing values to the
<output> element in browsers that support the <output> element, you can access it
through the form, for example:

var element = document . forms . formname . outputname ;