Keep Form Data filled out without a submit (PHP/JS)

Question

this is my very first post here so any criticism regarding this question is very welcome.

To the question: I have a form input on my web page which hold basic user data (Please enter your name etc) But since the web page has more than one page, a user could navigate between the pages with a not fully completed and submitted form. (Go back to shop while on card page for example) I wanted to ask if it could be possible to keep what was already filled out by the user on page refresh without the user actually pressing a submit button or what would be best practice.

Right now i'm trying an Ajax request with JS onclick events to somehow get the relevant info to my php $SESSION. Sadly i'm failing horribly with that, so if that would be the way to go and you know a good tutorial for that, i would be glad for a link too.

Thank you for your time!

Better not to submit the page until all the forms are filled. You can use multiple forms and hide/show the active step to handle this. — jithil, Jan 05 '21 at 10:18
Set an event listener on the inputs on change in your form and store the data in local storage. Then when that page loads, check if you have something stored in local storage and if you do, populate the inputs. No need for any PHP or Ajax. But honestly, how much of an issue is this? People tend to know how websites work and that if they click away from a form, it doesn't remember the data. Just so you don't spend a lot of time solving a non-problem. — M. Eriksson, Jan 05 '21 at 10:19

score 0 · Accepted Answer · answered Jan 05 '21 at 10:29

A very simple example of using fetch to issue an ajax request to ( in this case ) the same page. The request is a POST request which is processed by the PHP code and sets a single session variable. A basic text representaion of this assign variable is then sent back to the ajax/fetch callback where it is simply alerted

This should, I hope, give a fair idea how you might use Ajax to set a session variable. You could expand the logic and send many values at once, convert to JSON and store in the session var.

The simple function sessionvalue takes a single argument - namely the name of the session variable. If it is found it will be used as the value to the original field.

<?php
    session_start();
    
    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['username'] ) ){
        $_SESSION['username']=$_POST['username'];
        exit($_SESSION['username']);
    }

    function sessionvalue( $field=false ){
        return !empty( $_SESSION[ $field ] ) ? $_SESSION[ $field ] : '';
    }

?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
    </head>
    <body>
        <form name='users' method='post'>
            <input type='text' name='username' value='<?=sessionvalue('username');?>' />
            <input type='button' value='Submit' />
        </form>
        <script>
            document.querySelector('input[type="button"]').addEventListener('click',function(e){
                let fd=new FormData( document.forms.users );
                    
                fetch(location.href,{method:'post',body:fd})
                    .then( r=>r.text() )
                    .then( text=>{
                        alert(text)
                    })
            });
        </script>
    </body>
</html>

score 0 · Answer 2 · answered Jan 05 '21 at 10:32

In addition to the previous answer because you've asked about best practice:

I recommend you to force the user to submit the form at the point the information is needed. If the user has filled in some of the data and tries to leave the page, you could implement an unload page handler so that the user gets a warning that the data will get lost like this:

window.onbeforeunload = function(e) {
   return 'Warning text here.';
};

Keep Form Data filled out without a submit (PHP/JS)

2 Answers2