Since finishing my last post , I’ve been wanting to work on a way of implementing the concepts. Let’s say you have a long form (like a job application) or a form you would be filling out a lot (like shipping/billing information). You could use ajax to store the information server-side but let’s say you need or want to store it client-side.
Using jQuery, we can loop through all of the text boxes on the page, without really knowing how many elements are there.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="windows-1252">
<title>Keep webform data persistent</title>
<!-- jQuery CDN -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
/*Float the form labels to the left and allow them 40% of the width of the form*/
label {
clear:both;
float: left;
width:40%;
}
/*Float the form inputs to the right and allow them 50% of the width of the form*/
input {
float: right;
width: 50%;
}
/*Allow the form to use 50% of the width of the page*/
form {
width:50%;
}
</style>
</head>
<body>
<!-- Output a simple webform to collect user data -->
<form method="post">
<label for"fname">First Name</label>
<input name="fname" type="text" size="20">
<label for="mname">Middle Name</label>
<input name="mname" type="text" size="20">
<label for="lname">Last Name</label>
<input name="lname" type="text" size="20">
<!-- When the user "submits" data, call the debug function. Do not actually submit anything. -->
<button type="button" onclick="debug()">Submit</button>
</form>
<script type="text/javascript">
// This function doesn't do anything special. It simply dumps the values from the form to the browser's console. It is meant to show the variables we will be dealing with in the next parts.
function debug(){
// Simply output the form's values to the browser console.
$('form input[type=text]').each(function(){
console.log(this.name+': '+this.value);
});
}
</script>
</body>
</html>
Now that we know what’s there, let’s store the values in an array.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="windows-1252">
<title>Keep webform data persistent</title>
<!-- jQuery CDN -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
/*Float the form labels to the left and allow them 40% of the width of the form*/
label {
clear:both;
float: left;
width:40%;
}
/*Float the form inputs to the right and allow them 50% of the width of the form*/
input {
float: right;
width: 50%;
}
/*Allow the form to use 50% of the width of the page*/
form {
width:50%;
}
</style>
</head>
<body>
<!-- Output a simple webform to collect user data -->
<form method="post">
<label for"fname">First Name</label>
<input name="fname" type="text" size="20">
<label for="mname">Middle Name</label>
<input name="mname" type="text" size="20">
<label for="lname">Last Name</label>
<input name="lname" type="text" size="20">
<!-- When the user "submits" data, call the saveForm function and then call the debug function. Do not actually submit anything. -->
<button type="button" onclick="saveForm();debug();">Submit</button>
</form>
<script type="text/javascript">
// Create an array to hold the form contents inside
var myForm = [];
function saveForm(){
// Take each input's name and value and add it to the array we already created.
$('form input[type=text]').each(function(){
myForm.push({ name: this.name, value: this.value});
});
}
function debug(){
// Loop through our array and output the values. These values should reflect what form inputs we have above and what their current values are.
for (var i = 0; i < myForm.length; i++) {
console.log(myForm[i].name+': '+myForm[i].value);
}
}
</script>
</body>
</html>
Now that the values are packaged up in an array, let’s build setters and getters around this.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="windows-1252">
<title>Keep webform data persistent</title>
<!-- jQuery CDN -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
/*Float the form labels to the left and allow them 40% of the width of the form*/
label {
clear:both;
float: left;
width:40%;
}
/*Float the form inputs to the right and allow them 50% of the width of the form*/
input {
float: right;
width: 50%;
}
/*Allow the form to use 50% of the width of the page*/
form {
width:50%;
}
</style>
</head>
<body>
<!-- Output a simple webform to collect user data -->
<form method="post">
<label for"fname">First Name</label>
<input name="fname" type="text" size="20">
<label for="mname">Middle Name</label>
<input name="mname" type="text" size="20">
<label for="lname">Last Name</label>
<input name="lname" type="text" size="20">
<button type="submit" name="Submit">Submit</button>
</form>
<script type="text/javascript">
// Let's put both functions within a resonably named namespace
var formDataStorage = {
set : function (){
// (Re)create the myForm valiable
var myForm = [];
// Delete old data from localstorage
localStorage.removeItem('myForm');
// Take each input's name and value and add it to the array we already created.
$('form input[type=text]').each(function(){
// Push each input's value into the temporary variable
myForm.push({ name: this.name, value: this.value});
});
// Add the array to localStorage
localStorage.myForm = JSON.stringify(myForm);
},
get : function (){
// Is the form already stored within localStorage? If so, get it and copy it's contents over our myform array variable.
if(localStorage.myForm != undefined){
// Get the existing values out of localStorage
myForm = JSON.parse(localStorage.myForm);
// Loop through myForm
for (var i = 0; i < myForm.length; i++) {
// Populate the form with what data you have for it
$('[name='+myForm[i].name+']').val(myForm[i].value);
}
}
}
}
// Populate the form with whatever data already exists for it
formDataStorage.get();
// Watch for a change in a change in an input field. If there is a change, resave the form values.
$("input").change( function() {
// If a change is detected, save the values.
formDataStorage.set();
});
</script>
</body>
</html>
You’ll notice that you can essentially just drop this javascript into a page with forms and it will start collecting values. You need to be careful though. What if your user is on a shared computer? It will blindly leave the values for the next visit to the site. My suggestion would be that you use a “remember me” checkbox. That would give the user a little more control. Alternately, you could replace localStorage with sessionStorage. That would kill the stored values once they close the browser.
