StickyForms
StickyForms Plugin
Adding Dependencies
To begin, you should download and add the necessary Jquery and StickyForms dependencies to the <head></head> of your website.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.StickyForms.js"></script>
</head>
</head>
Download Jquery. Download JQByte StickyForms.
Default Options
Below are the default options for StickyForms. These options 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 options 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 havior 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 $_GET
With the disableIfGetSet setter option, you can disable the StickyForms plugin in the presence of a specific $_GET variable.
Option Syntax: [$_GET variable] (default is '')
<script type="text/javascript" language="javascript">
$(function() {
$('#formID').StickyForm({
'disableIfGetSet' : 'var'
});
});
</script>
Advanced: Trigger via Javascript
New with version 1.0, StickyForms can be automatically triggered via a javascript function, handy 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>