StickyForms

Automatically saves all form fields into cookies, and then autofills those values on any form that shares element IDs across your site.

Dependencies

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

Default Settings

Below are the default settings for StickyForms. These settings will be thoroughly explained in the below sub-sections.

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#formID').StickyForm({
		'debug': 'false',
		'elementTypes'	: 'all',
		'cookieLifetime': '60',
		'disableOnSubmit': 'true',
		'excludeElementIDs': '',
		'scope'	: 'global',
		'disableIfGetSet' : ''
	});
});
</script>
	

Basic Implementation

A basic implementation of StickyForms using the default settings where all form values are saved globally.

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#formID').StickyForm();
});
</script>
	

Controlling Sticky Element Types

With the elementTypes setter option, you can control which elements types have the sticky behavior.

Options: [text,password,checkbox,radio,textarea,select-one,select-multiple,all] (default is all)

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#formID').StickyForm({
		'elementTypes' : 'text,select-one,select-multiple'
	});
});
</script>
	

Exclude Specific Field Element IDs

With the excludeElementIDs setter option, you can exclude specific elements from the sticky behavior.

Option Syntax: [ID1,ID2]

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#formID').StickyForm({
		'excludeElementIDs': 'sf_password'
	});
});
</script>
	

Controlling Cookie Lifetime and Scope Behavior

With the cookieLifetime setter option, you can control the lifetime (in days) of the sticky cookies.

With the scope setter option, you can specify if you want the sticky values to be remembered strictly on a single form, or across all forms on your site.

cookieLifetime Syntax: [integer] in # days (default is 60)

Scope Options: [single,global] (default is global)

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#formID').StickyForm({
		'scope'	: 'single',
		'cookieLifetime': '30'
	});
});
</script>
	

Advanced: Enable Debugging

With the debug setter option, you can enable the debugging feature of StickyForms.

Options: [true/false] (default is false)

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#formID').StickyForm({
		'debug'	: 'true'
	});
});
</script>
	

Advanced: Disable StickyForms in the presence of a Query String (GET parameter)

With the disableIfGetSet setter option, you can disable the StickyForms plugin in the presence of a specific query string variable.

Option Syntax: [GET variable] (default is '')

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#formID').StickyForm({
		'disableIfGetSet' : 'var'
	});
});
</script>
	

Advanced: Trigger via Javascript

StickyForms can be automatically triggered via a Javascript function, providing support for forms that are processed via AJAX.

 
<p><input type="button" value="AJAX Save" onclick="$('#formID').StickyForm('process');" /></p>
<!-- where formID is the ID of the form -->

<script type="text/javascript" language="javascript">
$(function() {
	$('#formID').StickyForm();
});
</script>
	

Advanced: Disable the Submit Button while Processing

With the disableOnSubmit setter option, you can control the disabled state of the Submit button while processing.

Options: [true/false] (default is true)

 
<script type="text/javascript" language="javascript">
$(function() {
	$('#formID').StickyForm({
		'disableOnSubmit': 'false'
	});
});
</script>