output example with localized number

by trixta

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/polyfiller.js"></script>
<h1>Output element example</h1>

<form>
    <legend>Invoice</legend>

    <p><label for="hours">Number of hours:</label>
    <input type="number" id="hours" name="hours"></p>

    <p><label for="rate">Rate:</label>
    <input type="number" id="rate" name="rate">(&pound;'s)</p>

    <p><label for="vat">VAT:</label>

    <input type="number" id="vat" value="0.20" step="0.1" name="vat"></p>

    <p>Total: <strong>&pound;<output name="amount" for="hours rate vat">0</output></strong></p>
</form>

CSS

form{     background:#fff7db;     padding:1em;     width:300px; }  
label {     display:inline-block;     width:130px;     text-align:right; }  
input {     display:inline-block;     width:70px;     margin:0 1em;     padding:2px 3px;     border-radius:3px;     border:1px solid #ccc;     font-size:1em; }  
legend {     font-weight:bold; }  
p:last-of-type {     margin-left:67px;     text-transform:uppercase;     font-weight:bold; }  
strong {     margin-left:0.9em; }

JavaScript

if (jQuery.webshims && window.Modernizr && !Modernizr.inputtypes.number) {
    jQuery.webshims.polyfill('forms-ext');
}


jQuery(function($) {
    $('form').bind('input', function() {
        var hours = $('#hours').prop('valueAsNumber') || 0;
        var rate = $('#rate').prop('valueAsNumber') || 0;
        var vat = $('#vat').prop('valueAsNumber') || 0;
        var result = ((hours * rate) + ((hours * rate) * vat)).toLocaleString();
        $('output[name="amount"]').prop('value', result);
    }).bind('submit', function() {
        e.preventDefault()
    });
});