Form Protector

uses LocalStorage to submit form values to local storage for an indefinite period of time

by Frank Taylor

HTML

<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>
</form>

<output name="form output" for="date URL email range area text" form="elformo">
    
</output>

<button type="button" onclick="localStorage.clear()">Clear</button>
<output id="info">
    <h2>stats</h2>
    <p id="email"></p>
    <table id="keylist">
        
    </table>
</output>

CSS

form, output{
background: #fffefe;
    border-radius: 5px;
    border: 2px solid #333;
    width: 200px;
    display:block;
    float:left;
    margin-right: .5em;
    min-height: 180px;
}

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;
}

JavaScript

// CAPTURE FORM DATA
//take whatever the input field is, put its value in storage on keyup
$('input, datalist, keygen, optgroup, select, textarea').keyup(function(event){ 
    var name;
    var value;
    var name = $(this).attr("name");
    var value = $(this).val();
    localStorage.setItem(name, value);
 
    currentval = $(this).val();
    outputs = $('output[name="form output"]').html;
    $('output[name="form output"]').html("<p>" + currentval + "</p>" );

});

//use this for the input slider - since it doesn't use the keyboard
$('[type="range"]').mousemove(function(event){
 var name;
    var value;
    var name = $(this).attr("name");
    var value = $(this).val();
    localStorage.setItem(name, value);
 
    currentval = $(this).val();
    outputs = $('output').html;
    $('output[name="form output"]').html("<p>" + currentval + "</p>" );
    
});

//load the values into input forms
$('input').each(function(event) {
var fieldkey = $(this).attr("name");
var fieldval = localStorage.getItem(fieldkey);
$(this).val(fieldval);
});

//LOOK FOR CURRENT ITEMS
var items = localStorage.length; //just find out the quantity of items
var keys = new Array(); //make an array out of the local storage items
for (i=0; i < items; i++)
{
  keys.push(localStorage.key(i));
  
};

//OUTPUT THE VALUES (DEMO ONLY)
//output the list of keys somewhere
var keylist = $('#keylist');
for (i=0; i < items; i++)
{
$('#keylist').append(('<tr><td>' +localStorage.key(i) +'</td><td>' +(localStorage.getItem(localStorage.key(i))) +'</td></tr>'));   
};

//add in the number of items
$('#keylist').append('<tr><td>Number of items</td><td>' + items + '</td></tr>');