How to send half filled form data to the server?

Question

We have a long form that user needs to fill, it has 10 multiple choice questions. We are facing an issue that users are filling 4-5 questions and then stop filling it further.

We want to send this partially filled form information to the server.

One way to do this is by sending the data at each step ie as soon as user answers any question. But this would result in too many API hits and slow down the filling process at the client end.

Is there any other way to achieve this ie by using js unload event or can we detect on the client side when user is changing-tab/closing-browser/ or using any other methods to exit our page?

Answer 1

I do this all the time for forms to capture potential form abandonments. So every time there's a blur on an input field, it checks frequency and sends the form data as a post to a handler where you can receive the data and do what you need at that /abandoned/handler.php file.

Javascript (be sure JQuery is initialized first):

function sendAbandoned() {
        var now = new Date();
        now = Math.floor(now / 1000);

        if ((now - lastUpdate) < 10) {
            // make sure doesn't send too many "updates"
            return false;
        }


        lastUpdate = now;
        var formArr=$("form[name='formName']").serializeArray();

        $.post('/path/to/abandoned/handler.php',
        formArr);
    }


    $("form[name='formName'] input").blur(function () {
        sendAbandoned();
    });