tests/html5Forms/output.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<title>Example of the output tag.</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<!-- This CSS file is not necessary to use html5Widgets -->
		<link type="text/css" rel="stylesheet" href="../../shared/css/useragentmanExample.css">
		<link type="text/css" rel="stylesheet" href="css/form.css" />
		
		
		
		<!-- Needed for Forms Feature Detection -->
		<script type="text/javascript" src="../../shared/js/modernizr.com/Modernizr-2.5.3.forms.js">
		</script>
		
		<!-- Needed for Validation --> 
		<script type="text/javascript" src="../../shared/js/html5Forms.js" data-webforms2-support="output" data-webforms2-force-js-validation="true">
		</script>
		
	</head>
	<body id="myExample" class="html5Widgets-debug">
    	<div id="exampleBlurb">
    		<p>The following is an example of using the HTML5 <code>output</code> tag with the 
			deprecated <code>oninput</code> event to do
			some calculations on the data within the form.  <a href="http://www.useragentman.com/blog/?p=1110">Back to User Agent Man HTML5 Forms article.</a></p>
    	</div>
		
        <form method="get" action="http://www.useragentman.com/testForm.php" oninput="
        	document.getElementById('taxes').innerHTML = Math.round(price.value * 0.15 * 100) / 100;
        	document.getElementById('total').innerHTML = Math.round(price.value * 1.15 * 100) / 100
        " >
        	
			<fieldset>
				<legend>Money You Owe</legend>
			
				<p>Enter in the price and we will calculate what you owe us.</p>
	            <table class="formTable">
	                <tbody>
	                	<tr>
	                		<th>Price:</th>
							<td><input type="number" name="price" value="" autofocus="autofocus" />
							<div class="description">The total of the stuff you just bought.  When you fill
							this in, you will see the items below will change.</div>
							</td>
						</tr>
						
						<tr>
							<th>Taxes:</th>
							<td><output id="taxes" oninput="this.value = Math.round(price.value * 0.15 * 100) / 100" >0</output>
							<div class="description">This is how much you have to give to The Man, whether you like it or not.</div>
							</td>
						</tr>
						
						<tr>
							<th>Total:</th>
							<td><output id="total" oninput="this.value = Math.round(price.value * 1.15 * 100) / 100" >0</output>
							<div class="description">This is how much you have to shell out in total.  Have a nice day!</div>
							
							</td>
						</tr>
					</tbody>
				</table>
			</fieldset>
	</body>
</html>