User Input Check

Check to make sure EVERY section has had some sort of completion.

by Robert Herring

HTML

<form method="POST" action="/echo/html/?html=;delay=3;">
	<fieldset>
		<legend>Group One:</legend>
		<div class="group">
			<input id="fname" name="fname" type="text"  tabindex="1" placeholder="First Name" />
			<br />
			<input type="radio" name="12-MAY-12[approved]" id="12-MAY-12-approve" value="approve"  /><label for="12-MAY-12-approve">Approve</label>
			<input type="radio" name="12-MAY-12[approved]" id="12-MAY-12-reject" value="reject" /><label for="12-MAY-12-reject" class="redLabel">Reject</label>
			<br />
			<input type="radio" name="12-MAY-12[Denied]" id="12-MAY-12-approve1" value="approve"  /><label for="12-MAY-12-approve1">Approve</label>
			<input type="radio" name="12-MAY-12[Denied]" id="12-MAY-12-reject1" value="reject" /><label for="12-MAY-12-reject1" class="redLabel">Reject</label>
			<br />
			<textarea name="message1" id="message1" rows="5" cols="52" placeholder="Message 1 Here"></textarea>
			<br />
			<input type="checkbox" name="check1" value="check1" />check1
			<input type="checkbox" name="check2" value="check2" />check2
			<br />
			<select name="choose1" id="choose1" >
				<option value="" >Choose One *</option>
				<option value="Toys" >Toys</option>
				<option value="other" >Other</option>
			</select>
			<p class="userInput1">Section Incomplete</p>
		</div>
	</fieldset>

	<fieldset>
		<legend>Group Two:</legend>
		<div class="group">
			<input id="lname" name="lname" type="text"  tabindex="1" placeholder="Last Name" />
			<br />
			<input type="radio" name="14-MAY-12[approved]" id="14-MAY-12-approve" value="approve"  /><label for="14-MAY-12-approve">Approve</label>
			<input type="radio" name="14-MAY-12[approved]" id="14-MAY-12-reject" value="reject"  /><label for="14-MAY-12-reject" class="redLabel">Reject</label>
			<br />
			<input type="radio" name="14-MAY-12[Denied]" id="14-MAY-12-approve1" value="approve"  /><label for="14-MAY-12-approve1">Approve</label>
			<input type="radio" name="14-MAY-12[Denied]" id="14-MAY-12-reject1"...

CSS

/************************************************/
/******************** Reset ********************/
/************************************************/


* { margin:0; padding:0; font-size:100%; font-family:sans-serif; }
html, body { width:100%; height:100%; /*min-width:960px;*/ }
html { background:#FFFFFF overflow-x:hidden; }
img { border:0; }
img a { border:0; }
a { text-decoration:none; color:#D06B02; font-family:sans-serif; font-weight:normal; }
a:hover { color:#375c6a; }
:focus { outline: 0; -moz-outline-style:none; }
fieldset { border: 1px #c44 solid; padding:10px; margin: 10px; }
legend { font-weight:bold; color: #cc0404; }

/*** Headings & Text ***/
h1, h2, h3, h4, h5, h6 { font-weight:normal }
h1 { font-family:sans-serif; font-size:18pt; color:#FFFFFF; margin:0; }
h2 { font-family:sans-serif; font-size:16pt; color:#032a38; margin-top:-15px; }
h3 { font-family:sans-serif; font-size:14pt; color:#032a38; text-transform:uppercase; }
h4 { font-family:sans-serif; font-size:12pt; color:#375c6a; margin-bottom:5px; letter-spacing:1px; }
h5 { font-family:sans-serif; font-size:11pt; color:#ffffff; letter-spacing:1px; }
h6 { font-family:sans-serif; font-size:10pt; color:#c6c6c6; }
ul { margin-bottom:10px; }
li { font-size:8pt; color: #fff; font-family:sans-serif; list-style:none; }
li span { font-weight:bold; }
dt { color: #737373; font-family:sans-serif; list-style:none; }
p { font-family:sans-serif; color:#737373; font-size:10pt; line-height:1.2em; margin:15px 0; }
p span {font-family:sans-serif; color: #464646;  }
em { font-family:sans-serif; font-size:10pt; line-height:1.2em; color: #FF3111; margin:5px 0; }
em span { color: #FF3111;  }
strong { font-family:sans-serif; font-weight:bold; }
.dropshadow { -moz-box-shadow: 0 0 2px #000; -webkit-box-shadow: 0 0 2px #000; box-shadow: 0 0 2px #000; }
.textshadow { text-shadow: 0 0 5px #000; }
.clearFloat {clear:both;}

JavaScript

$(function () {
	
	function getInputs() {
		var inputScore = 0;
		
		$('.group').each(function() {
			var userInput = false;
			var pName = ".userInput";        
			inputScore += 1;
			pName += inputScore;
			
			if($(':radio', this).is(':checked')) {
				userInput = true;
			}
			if($(':text', this).val()) {
				userInput = true;
			}
			if($(':checkbox', this).is(':checked')) {
				userInput = true;
			}
			if($('select', this).val()) {
				userInput = true;
			}
			if($('textarea', this).val()) {
				userInput = true;
			}
			
			if(userInput) {
				$(pName).text("Section is completed");
			} else {
				$(pName).text("Still Incomplete");
			}
		});
	}


	$('.submit').click(function() {
		getInputs();
	});
	
});