<!--
Sample HTML output for the "Ajax Tableless Layout" template.
Two of every field type is represented here
(one required and one not required).

Note that wherever you see numbers (especially "7"),
they will be replaced by different numbers in every form block,
so don't rely on them for styling (use the classes instead).
-->

<script type="text/javascript">
	function form_7_onsubmit(form) {
		//This js code happens when user submits the form...
		$(form).find('div.errors').hide().html(''); //hide error messages and clear their contents (in case user previously submitted the form but had validation errors)
		$(form).find('input.submit').hide(); //hide the submit button so user isn't tempted to click it again
		$(form).find('div.indicator').show(); //show the progress indicator so user knows something is happening
	}
	
	function form_7_onsuccess(form, thanks) {
		//This js code happens after form is successfully processed...
		//The 'thanks' variable is a string containing the thank-you message (as entered by the user when adding the form block)
		$(form).find('div.success').html(thanks).show(); //put the thanks message into its placeholder and make it visible
		$(form).find('div.indicator').hide(); //hide the progress indicator because we're done processing
		$(form).find('div.fields').hide(); //hide the field so user isn't tempted to fill it out again
	}
	
	function form_7_onerror(form, errors) {
		//This js code happens after form is rejected due to validation errors...
		//The 'errors' variable is a string of html containing all error messages,
		// for example: 'Please correct the following errors: <div class="error">Complete required fields *</div> <div class="error">Incorrect captcha code</div>'
		$(form).find('div.errors').html(errors).show(); //put the error message(s) into its placeholder and make it visible
		$(form).find('div.indicator').hide(); //hide the progress indicator because we're done processing
		$(form).find('input.submit').show(); //show the submit button so user can re-submit after fixing errors
	}
</script>

<div id="formblock7" class="formblock">
	<form id="miniSurveyView7" method="post" action="/path/to/index.php?cID=77&bID=7&arHandle=Main&ccm_token=7777777777:77777777777777777777777777777777&btask=passthru&method=submit_form#7777777777" enctype="multipart/form-data">

		<div class="success" style="display: none;">Thanks!</div>

		<div class="errors" style="display: none;"> 
			Please correct the following errors:
			<div class="error">Complete required fields *</div>
			<div class="error">Incorrect captcha code</div>
			<div class="error">Invalid file extension.</div>
			<div class="error">Invalid file.</div>
		</div> 

		<div class="fields">
			<div class="field field-text">
				<label for="form7_question8">First Question (Text)</label>
				<input id="form7_question8" name="Question8" type="text" value="" />
			</div>
			<div class="field field-text">
				<label for="form7_question9">Second Question (Required Text) <span class="required">*</span></label>
				<input id="form7_question9" name="Question9" type="text" value="" />
			</div>
			<div class="field field-textarea">
				<label for="form7_question10">Third Question (Textarea)</label>
				<textarea id="form7_question10" name="Question10" cols="50" rows="3" style="width:95%"></textarea>
			</div>
			<div class="field field-textarea">
				<label for="form7_question11">Fourth Question (Required Textarea) <span class="required">*</span></label>
				<textarea id="form7_question11" name="Question9" cols="50" rows="3" style="width:95%"></textarea>
			</div>
			<div class="field field-radios">
				<label>Fifth Question (Radio Buttons)</label>
				<div class="radioList">
					<div class="radioPair"><input name="Question12" type="radio" value="First Choice" />&#160;First Choice</div>
					<div class="radioPair"><input name="Question12" type="radio" value="Second Choice" />&#160;Second Choice</div>
					<div class="radioPair"><input name="Question12" type="radio" value="Third Choice" />&#160;Third Choice</div>
				</div>
			</div>
			<div class="field field-radios">
				<label>Sixth Question (Required Radio Buttons) <span class="required">*</span></label>
				<div class="radioList">
					<div class="radioPair"><input name="Question13" type="radio" value="First Choice" />&#160;First Choice</div>
					<div class="radioPair"><input name="Question13" type="radio" value="Second Choice" />&#160;Second Choice</div>
					<div class="radioPair"><input name="Question13" type="radio" value="Third Choice" />&#160;Third Choice</div>
				</div>
			</div>
			<div class="field field-select">
				<label for="form7_question14">Seventh Question (Select Box)</label>
				<select id="form7_question14" name="Question14">
					<option value="" selected="selected">----</option>
					<option>First Selection</option>
					<option>Second Selection</option>
					<option>Third Selection</option>
				</select>
			</div>
			<div class="field field-select">
				<label for="form7_question15">Eighth Question (Required Select Box) <span class="required">*</span></label>
				<select id="form7_question15" name="Question15">
					<option value="" selected="selected">----</option>
					<option>First Selection</option>
					<option>Second Selection</option>
					<option>Third Selection</option>
				</select>
			</div>
			<div class="field field-checkboxlist">
				<label>Ninth Question (Checkbox List)</label>
				<div class="checkboxList">
					<div class="checkboxPair"><input name="Question16_0" type="checkbox" value="Check One" />&#160;Check One</div>
					<div class="checkboxPair"><input name="Question16_1" type="checkbox" value="Check Two" />&#160;Check Two</div>
					<div class="checkboxPair"><input name="Question16_2" type="checkbox" value="Check Three" />&#160;Check Three</div>
				</div>
			</div>
			<div class="field field-checkboxlist">
				<label>Tenth Question (Required Checkbox List) <span class="required">*</span></label>
				<div class="checkboxList">
					<div class="checkboxPair"><input name="Question18_0" type="checkbox" value="Check One" />&#160;Check One</div>
					<div class="checkboxPair"><input name="Question18_1" type="checkbox" value="Check Two" />&#160;Check Two</div>
					<div class="checkboxPair"><input name="Question18_2" type="checkbox" value="Check Three" />&#160;Check Three</div>
				</div>
			</div>
			<div class="field field-fileupload">
				<label for="form7_question19">Eleventh Question (File Upload)</label>
				<input id="form7_question19" type="file" name="Question19" id="" />
			</div>
			<div class="field field-fileupload">
				<label for="form7_question20">Twelfth Question (Required File Upload) <span class="required">*</span></label>
				<input id="form7_question20" type="file" name="Question20" id="" />
			</div>

			<div class="field field-captcha">
				<label>Please type the letters and numbers shown in the image.</label>
				<img src="/path/to/index.php/tools/required/captcha?nocache=7777777777" alt="Captcha Code" class="ccm-captcha-image" />
				<input type="text" name="ccmCaptchaCode" class="ccm-input-captcha" />
			</div>

		</div><!-- .fields -->
		
		<input type="submit" name="Submit" class="submit" value="Submit" />

		<div class="indicator" style="display: none;">
			<img src="/path/to/site/concrete/images/throbber_white_16.gif" width="16" height="16" alt="" />
			<span>Processing...</span>
		</div>

		<input name="qsID" type="hidden" value="7777777777" />
		<input name="pURI" type="hidden" value="/path/to/index.php?cID=77" />

	</form>
</div><!-- .formblock -->
