/*!
* Forminator T100: Protect all your form inputs from bad internet connections and an angry John Connor
* @requires Jquery v1.4 or above
*
* Copyright (c) 2012 Frank M. Taylor
* Dual licensed under MIT and GPL licenses
* http://opensource.org/licenses/MIT
* http://www.gnu.org/licenses/gpl.html
* version 0.1.0
*/
/*
* USAGE
* 1. apply .forminator() to any form
* 2. include optional arguments for which selectors you want, whether we store on name or id, and clear button
*/
/* VERSIONS
* 0.1.0 - First working version
* 0.2.0 - Turned into a jQuery plugin
*/
;(function ( $ ) {
$.fn.forminator = function(storedFields, storageKey, clearButton) {
form = this;
if (this == "
// CAPTURE FORM DATA
$(form).children('input, datalist, keygen, optgroup, select, textarea').keyup(function(event){
var name = $(form).attr("id")+"-" + $(this).attr(storageKey);
var value = $(this).val();
localStorage.setItem(name, value);
currentval = $(this).val();
});
//use this for the input slider - since it doesn't use the keyboard
$(form).children('[type="range"]').mousemove(function(event){
var name = $(this).attr(storageKey);
var value = $(this).val();
localStorage.setItem(name, value);
currentval = $(this).val();
});
//load the values into input forms
$(form).children('input,textarea,select, datalist, keygen, optgroup').each(function(event) {
var fieldkey = $(form).attr("id") + "-" + $(this).attr(storageKey);
var fieldval = localStorage.getItem(fieldkey);
$(this).val(fieldval);
});
$(clearButton).click(function(event){
localStorage.clear();
});
};
})(jQuery);
$('#elformo').forminator('input', 'name', '#clearIt');
<form id ="elformo" name="elformo" >
<label for="date">date</label>
<input type="date" placeholder="Date" name="Date"/>
<label for="url">URL</label>
<input type="URL" placeholder="URL" name="URL"/>
<label for="email">Email</label>
<input type="email" placeholder="email address" name="email">
<label for="range">Range</label>
<input type="range" min="1" max="10" name="range" />
<label for="area">area</label>
<textarea type="text" name="area" placeholder="Text area"></textarea>
<button type="button" onclick="button()">send or something</button>
<button type="button" id="clearIt">Clear</button>
</form>
<form id ="elformerito" name="elformo" >
<label for="date">date</label>
<input type="date" placeholder="Date" name="Date"/>
<label for="url">URL</label>
<input type="URL" placeholder="URL" name="URL"/>
<label for="email">Email</label>
<input type="email" placeholder="email address" name="email">
<label for="range">Range</label>
<input type="range" min="1" max="10" name="range" />
<label for="area">area</label>
<textarea type="text" name="area" placeholder="Text area"></textarea>
<button type="button" onclick="button()">send or something</button>
<button type="button" id="clearIt">Clear</button>
</form>
<section id="something">
<article id="editablearticle" contenteditable="true">
editable article
</article>
</section>
<output name="form output" for="date URL email range area text" form="elformo"></output>
<output id="info">
<h2>LocalStorage Info</h2>
<p id="email"></p>
<table id="keylist">
</table>
</output>
/*CSS NORMALIZE *//*CSS NORMALIZE *//*CSS NORMALIZE *//*CSS NORMALIZE */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}audio,canvas,video{display:inline-block;display:inline;zoom:1;}audio:not([controls]){display:none;}[hidden]{display:none;}html{font-size:100%;/* 1 */overflow-y:scroll;/* 2 */-webkit-text-size-adjust:100%;/* 3 */-ms-text-size-adjust:100%;/* 3 */}body{margin:0;}body,button,input,select,textarea{font-family:sans-serif;}a:focus{outline:thin dotted;}a:hover,a:active{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}blockquote{margin:1em 40px;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}q{quotes:none;}/* 2 */q:before,q:after{content:'';content:none;}small{font-size:75%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}ul,ol{margin-left:0;padding:0 0 0 40px;}dd{margin:0 0 0 40px;}nav ul,nav ol{list-style:none;list-style-image:none;}img{border:0;/* 1 */-ms-interpolation-mode:bicubic;/* 2 */}svg:not(:root){overflow:hidden;}figure{margin:0;}form{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em;}legend{border:0;/* 1 */margin-left:-7px;/* 2 */}button,input,select,textarea{font-size:100%;/* 1 */margin:0;/* 2 */vertical-align:baseline;/* 3 */vertical-align:middle;/* 3 */}button,input{line-height:normal;/* 1 */}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;/* 1 */-webkit-appearance:button;/* 2 */overflow:visible;/* 3 */}input[type=checkbox],input[type=radio]{box-sizing:border-box;/* 1 */padding:0;/* 2 */}input[type=search]{-webkit-appearance:textfield;/* 1 */-moz-box-sizing:content-box;-webkit-box-sizing:content-box;/* 2 */box-sizing:content-box;}input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;/* 1 */vertical-align:top;/* 2 */}table{border-collapse:collapse;border-spacing:0;}
/* END OF RESET*//* END OF RESET*//* END OF RESET*//* END OF RESET*//* END OF RESET*//* END OF RESET*/
body, header, footer, #main{
width: 60em;
margin: 0 auto;
}
#main{
height: 30em;
}
form, output{
background: #fffefe;
border-radius: 5px;
border: 2px solid #333;
display:block;
}
form{
width: 20em;
margin: 0 1em;
clear: left;
float:left;
height: 30em;
}
output{
height: 14em;
width: 20em;
float:right;
margin: 0 0 1em;
}
label{
float:left;
margin:0;
font-size: 10px;
height:12px;
padding: 0;
width: 100%;
}
form > input{
margin: 1em;
padding: .5em;
}
input{
float:left;
}
input[type="email"], input[type="date"],input[type="url"]{
height: 1.5em;
outline: none;
border: 1px solid #efefef;
background: #efefef;
color: #777;
}
input[type="email"]:hover, input[type="email"]:focus,
input[type="date"]:hover,
input[type="url"]:hover,
input[type="date"]:focus,
input[type="url"]:focus{
border-color: #777;
}
footer{
}