Question

I have a multipage form with #p1,#p2,#p3. Once I submit the form, and when I try to click back browser button, it should go to #p1 with empty form fields. it is possible wiith Jquery Mobile?

Answer 1

I would override the backbutton and check for which page is the active page then based on the page do whatever house cleaning you need…

I submitted an example to another question really similar to this:

BackButton Handler

Where I have Options, Popup and HomePage you might just need P3 and when the activePage is equal to P3 clear your form and show P1.

    function pageinit() {
        document.addEventListener("deviceready", deviceInfo, true);
    }

    function deviceInfo() {
        document.addEventListener("backbutton", onBackButton, true);
    } 

    function onBackButton(e) {
        try{
            var activePage = $.mobile.activePage.attr('id');

            if(activePage == 'P3'){
                clearForm(); // <-- Calls your function to clear the form...
                window.location.href='index.html#P1';

            } else if(activePage == 'P1'){

                function checkButtonSelection(iValue){
                    if (iValue == 2){
                        navigator.app.exitApp();
                    }
                }

                e.preventDefault();
                navigator.notification.confirm(
                    "Are you sure you want to EXIT the program?",
                    checkButtonSelection,
                    'EXIT APP:',
                    'Cancel,OK');

            } else {
                navigator.app.backHistory();
            }
        } catch(e){ console.log('Exception: '+e,3); }
    }