jQuery Scorecard

HTML form with real-time scoring updates updates.

by Conor

HTML

<form action="add.php" id="scorecard" method="post">
	<div data-role="header" data-position="inline">
		<h1>Update Score</h1>
	</div>
			<div data-role="content" data-theme="c">
				<ul data-role="listview" class="ui-listview">
					<li data-role="fieldcontain">
 				    	<label for="name">Team:</label>
 				    	<input type="text" name="name" id="name" value="Team Test" data-mini="true" readonly>
					</li>
					<li data-role="fieldcontain">
 				    	<label for="course">Course:</label>
 				    	<input type="text" name="course" id="course" value="Augusta" data-mini="true" readonly>
					</li>
					<li data-role="fieldcontain">
						<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
						    <legend>Hole 1:</legend>
   						    <input name="h01" id="radio-choice-b" value="0" type="radio"><input type="hidden" id="par01" value="0">
						    <label for="radio-choice-b">0</label>
						    <input name="h01" id="radio-choice-c" value="1" type="radio"><input type="hidden" id="par01" value="-3">
						    <label for="radio-choice-c">1</label>
						    <input name="h01" id="radio-choice-e" value="2" type="radio"><input type="hidden" id="par01" value="-2">
						    <label for="radio-choice-e">2</label>
						    <input name="h01" id="radio-choice-f" value="3" type="radio"><input type="hidden" id="par01" value="-1">
						    <label for="radio-choice-f">3</label>
						    <input name="h01" id="radio-choice-g" value="4" type="radio"><input type="hidden" id="par01" value="0">
						    <label for="radio-choice-g">4</label>
						    <input name="h01" id="radio-choice-h" value="5" type="radio"><input type="hidden" id="par01" value="0">
						    <label for="radio-choice-h">5</label>
						</fieldset>
					</li>												
					<li data-role="fieldcontain">
						<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
						    <legend>Hole 2:</legend>
   						    <input name="h02" id="radio-choice-b" value="0"...

JavaScript

$("#scorecard").change(function() {
    var totalplayed = $('#scorecard :checked').filter(function() {
        return $(this).val() === '0';
    }).length;
    $("#played").val(2 - totalplayed);
}).change();

$("#scorecard").change(function() {
    var totalscore = 0;
    $("#scorecard input:hidden").each(

    function() {
        totalscore += parseInt($(this).val())
    });
    $("#score").val(totalscore);
}).change();