Progressive Profiling

Automatically saves all form fields into cookies, and then determines which field groups to show based off of previous submissions.

Dependencies

ProgressiveProfiler requires the jQuery library. Please download the jQuery library and include it in the <head></head> of your html page.

Implementation

The ProgressiveProfiler plugin requires the jQuery initialization, as well as the applying of a consistent id or class structure to the form element groups.

The JavaScript consists of specifying the id or class reference indicator for the form elements, the element field group array, and an administrative debug option. An example of the initialization is below.

 
<script type="text/javascript" language="javascript">
$('#form1').ProgressiveProfiler({
	'groupReferenceIndicator'	: '.progressive_profiler_', 
	'elementFieldGroups'		: [['title','company'], ['subscribe','notes']], 
	'debug'				: 'false'
});
</script>
	

The HTML requires the groupReferenceIndicator to wrap the elementFieldGroups.

<form id="form1" method="post">			
	<label for="name">Name:</label>
	<input type="text" id="name" name="name" />

	<div class="progressive_profiler_0">
		<label for="title">Title:</label>
		<input type="text" id="title" name="title" placeholder="e.g. Web Developer" />

		<label for="co">Company:</label>
		<input type="text" id="company" name="company" />
	</div>


	<div class="progressive_profiler_1">		
		<label for="subscribe">Subscription Status:</label>					
		<select id="subscribe" name="subscribe">
			<option value="Subscribe">Subscribe</option>
			<option value="Unsubscribe">Unsubscribe</option>
		</select>

		<label for="notes">Notes:</label>
		<textarea id="notes" name="notes" rows="3" cols="30"></textarea>
	</div>
				
	<input type="submit" value="Submit" />
</form>