Best way to store forms data before submit?

Question

First let me describe the scenario. Suppose a user filling a form in my site. The form may contain around 14 fields. Now after completing the 7fields he/she go back by mistake or close the window or the pc take a restart.

Now when he/she came back is there a way to show him that 7 fields filled up? Now there is three case to handle:

Go back from the main page Close the window Take a pc reboot.

There might be no solution for all of this. If only 1 and 2 situation can be handled that is fine.

I know about session but so far i know to save something in session you need to submit the site or refresh which is not my considerable case.

So i need a good way to do that?

In actual my site will host around 20-40 fields in each forms. So it is very important to make a recovery for the user if he close the tab or go back.

Answer 1

In the web world, the usual thing to do is to either save data in Cookies or Sessions. Cookies are stored in the user's machine until its expiration date is met, while Sessions usually have a shorter time span (depends usually on the server's session time to live).

One approach, if the user can leave and come back at a later point, (even after a restart), is to save it to a cookie. You can use setcookie in PHP for this, and serialize the data.

Example:

setcookie("UserFormData", serialize($_POST), time()+3600);  /* expire in 1 hour */

From: http://php.net/manual/en/function.setcookie.php

Answer 2

You can also set the session VIA ajax every x seconds. That way you eliminate your problem about refreshing the page to save your session value.

setInterval(function(){
     $.post("/ajaxLogin.php",{
            value: $("#value").val()
        }, 
        function(result){
            console.log('saved!');
      });
}, 2000);

And this is the ajaxLogin.php that is called via ajax

<?php
    session_start();
    $_SESSION['value'] = $_POST["value"];
?>

Answer 3

You can use Ajax to save data to session... you wont need to refresh.. You can make ajax call on each field update or whenever you want.. the ajax call does not need to wait for form submission.. it can be fired on every single keypress/keyup (though not recommended)

Answer 4

You could create an onchange function that creates/updates a cookie. You can set up a specific cookie for each input, assuming you're using PHP and the function in the link I provided you could do:

<input type="text" name="username" onchange="SetCookie('username',this.value,1);" value="<?=$_COOKIE['username'];?>" />

This seems like it would be very tedious, there may be a much better solution...