Reset inputs in the previous form for a Jquery Mobile Multi Page Application

0
votes

I developed an application using Jquery Mobile with multi pages (each one has an individual form) in a single html file.

And I haven't figure out until now how I can clear all fields of a previous form when the button Back (type data-rel="back" located on page header) is pressed, and the previous form is showed.

My flow is similar as described bellow:

  1. Show page Login

  2. On Login page fill fields (user, password), validate the form and submit it.

  3. After submit, change page for second page (Same HTML, data-role="page" )

  4. After press Back Button on the second page (not browser), the Login page still showing all input fields filled.

I saw a lot of snippets but not in particular related with this issue and when I tried to apply some of them I didn't get the clue to solve this.

Someone could help, please. Thanks!

1
javascripthtmlformsvalidationjquery-mobile

1 Answers

3
votes

If you want to clear the fields each time the form is visited you can simply use the pagebeforeshow event:

$('#page1').on('pagebeforeshow', function (event, data) {
    //clear fields here    
});

If you only want to clear the fields when coming back from the second page, the same event has a second argument which tells you where you are coming from.

$('#page1').on('pagebeforeshow', function (event, data) {
    var prevPageID = $(data.prevPage).attr("id");
    if (prevPageID == "page2"){
       //clear fields   
    }
});

API doc can be found here: http://api.jquerymobile.com/pagebeforeshow/