PHP Classes

PHP AutoSave Form Draft: Save form input values in browser storage as draft

Recommend this page to a friend!
     
  Info   Example   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 370 All time: 6,813 This week: 206Up
Version License PHP version Categories
autosave 1.0Public Domain5HTML, PHP 5
Description 

Author

This class can save form input values in browser storage as draft.

It generates JavaScript code periodically will save the values of the fields of a given form to local browser storage.

The code can restore the values of the field values in case the form is not submitted and the field values were lost because the browser closed or for some other reason.

The time interval on which the form draft values are saved is configurable.

The list of fields to be saved and the type of browser storage to be used is also configurable. Currently it supports HTML5 session or local storage.

Innovation Award
PHP Programming Innovation award nominee
June 2015
Number 5
Sometimes users of an application need to enter a lot of information in a form.

If for some reason, like for instance power or connectivity interruption, they do not submit the form before finishing entering all the information, they may lose the work done previously to enter part of the information.

This class provides a solution to prevent that users lose values entered in form fields by saving draft values to browser storage that can be recovered later.

Manuel Lemos
Picture of Dave Smith
  Performance   Level  
Name: Dave Smith is available for providing paid consulting. Contact Dave Smith .
Classes: 51 packages by
Country: United States United States
Age: 59
All time rank: 608 in United States United States
Week rank: 20 Up2 in United States United States Up
Innovation award
Innovation award
Nominee: 32x

Winner: 7x

Recommendations

Automatic saving of form data
Automatically save data while typing after every 20 mins

Example

<?PHP
/*
instantiate the class
you could also over-ride the timer interval here with autosave(int timerInterval)
timerInterval is the number of seconds between each auto save, the default value is 60 seconds (1 minute)
*/
include('autosave.class.php');
$auto = new autosave;

/*
add elements to be auto saved
method addElement(string id[, bool sessionOnly])
id is the id of the element to be auto saved
sessionOnly, true = saved data goes away if browser closed or submitted, false [default] saved data remains until submitted
*/
$auto->addElement('persistent');
$auto->addElement('sessiononly',true);

/*
do something if request data submitted
in this case we are just sending ourselves back to the example script so that we can refresh without the resubmit form warning
you will do whatever tasks planned to process the submitted data
*/
if( !empty($_REQUEST) ){
   
header('location: example.php');
}

/*
notes on the markup below...

onsubmit="clearDraft()" must be included in the form tag to clear the auto saved data when the form is submitted, otherwise
the next time the same user accesses this form for a new submission, the auto saved info will have populated the field.

you must specify a unique id for each element to be auto saved and this id must be added using the addElement method above

the generateScript method must be added after the page body, as shown below. This is required so that the auto save elements
are present before the script tries to populate them with the saved information.
*/
?>
<!DOCTYPE HTML>
<html>
    <head>
        <title>Auto Save Testing</title>
    </head>
    <body>
        <form method="post" onsubmit="clearDraft()">
            This is a persistent save and will be available until submitted, even if the browser is closed<br>
            <textarea name="persistent" id="persistent" style="width:400px;height:120px;"></textarea><br><br>
            This is a session only save and will be available until submitted or the browser is closed<br>
            <textarea name="sessiononly" id="sessiononly" style="width:400px;height:120px;"></textarea><br><br>
            <input type="submit" value="Submit">
        </form>
    </body>
    <?PHP echo $auto->generateScript();?>
</html>


  Files folder image Files (2)  
File Role Description
Plain text file autosave.class.php Class Main Class
Accessible without login Plain text file example.php Example Example Usage

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
 Version Control Unique User Downloads Download Rankings  
 0%
Total:370
This week:0
All time:6,813
This week:206Up