Form autosave

A way to autosave user's information constantly, without expecting them to click save constantly.

by Vanessa RC

HTML

<form id="some-form">
    <ul>
        <li>Name <input type="text" /></li>
        <li>Email <input type="text" /></li>
        <li>Phone <input type="text" /></li>
        <li>Fax <input type="text" /></li>
     </ul>
</form>
<div class="autosaved">Autosaved at <span id="save-time"></span></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Lato:300);
*:focus{
  outline: none;
}

li {
  list-style-type: none;
  margin: 0;
  padding: 10px;
}

input{
  margin: 0;
  padding: 10px;
  border-radius: 4px;
  border: none;
  
  font-family: 'Lato', sans-serif;
  font-size: 12pt;
  font-weight: light;
  colour: #aaaaaa;
}
.autosaved {
    display: none;
    
    background: palegreen;
    position: absolute;
    padding: 5px 10px;
    border: 1px solid darkgreen;
    border-radius: 3px;
    top: 15px;
    right: 15px;
}

JavaScript

$(document).ready(function() {
    var autoSaveInterval = setInterval(function() {
        saveForm("interval");
    }, 8000);
    
    var keyUpSave;
    $('#some-form input, #some-form textarea').keyup(function() {
        clearTimeout(keyUpSave);
        keyUpSave = setTimeout(function() {
            saveForm("Keyup");
        }, 5000);
    });
    
    var lastSaveTime = 0;
    function saveForm(source) {
        // do an ajax form submission here using $.ajax
        var now = new Date();
        var nowUnix = now.getTime();
        
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();
        
        if(nowUnix - lastSaveTime > 5000) {
            lastSaveTime = nowUnix;
            console.log("Save the form", source);
            
            $('#save-time').html(h+':'+m);
            
            $('.autosaved').fadeIn(500).delay(1000).fadeOut(500);
        }
    }
});