Hey, what's going on?

HTML form Autosave with Sisyphus.js: How to use it?

Posted by Syeilendra Pramuditya on July 13, 2015

Step 1

Download the source code from http://sisyphus-js.herokuapp.com

Step 2

Prepare a file named autosave.htm

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="sisyphus.min.js"></script>
<script>
$( function() {
$( "#form2" ).sisyphus(); //Autosave form2 only,
// or you can persist all forms data at one command
// $( "form" ).sisyphus();
} );
</script>
</head>
<body>

Form 1
<form action="" id="form1" name="form1" method="post">
Name:<br />
<input type="text" name="name" value="" /><br />
E-mail:<br />
<input type="text" name="mail" value="" /><br />
Comment:<br />
<input type="text" name="comment" value="" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

<br>
Form 2
<form action="" id="form2" name="form2" method="post">
Name:<br />
<input type="text" name="name" value="" /><br />
E-mail:<br />
<input type="text" name="mail" value="" /><br />
Comment:<br />
<input type="text" name="comment" value="" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

</body>
</html>


Step 3

Put the file in your web server and test it: open the page using browser, write something in the form, close the page, and open again. Watch how the magic works!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: