retain data in forms when going to another form and coming back again

Question

I have a form and there i have included some text boxes and select boxes. I'm using ionic framework and angularjs. When completing this form and on submit goes to another page to enter a password. So i want to move back to the previous form i can always press back and come. But the problem is the data i entered is gone.i have to complete the form all over again. Is there a way to fix this? Thanks.

On submit using below line i move into the password form

$state.go('app.transpass');

Do you use token system for security? Specifically, does the form generate token value on every visit to the form? — seoyoochan, Mar 27 '15 at 03:25
Alright. Then do you need to remember the inputs even after a browser is closed? And what is your backend language? I will let you know the best way to solve this usecase. — seoyoochan, Mar 27 '15 at 03:32
not when the browser is closed. But when i move to password form and if i deciced to come back to previous form (without submitting password form) i should be able to edit the form.But now there is no data when i come back to the form. — CraZyDroiD, Mar 27 '15 at 03:52
Use Angular Services, instead of scope variables for data binding. Angular Services hold data, until the tab that hosts your app is killed [closed]. — Manish Kr. Shukla, Mar 27 '15 at 04:11
@TechMa9iac can you give me an example similar to my problem. — CraZyDroiD, Mar 27 '15 at 04:14

score 1 · Answer 1 · answered Mar 27 '15 at 05:37

1

In your JS :

    app.service("YourService", function() {

        this.userName = "";

        this.password = "";

    });

    app.controller("YourController", function($scope, YourService) {

        $scope.YourService = YourService;

    });

in your HTML :

    <input type="text" ng-model="YourService.userName" />
    <input type="password" ng-model="YourService.password" />

Now trying switching the pages, using routes, and then come back to this page. You'll have your data as it is in the text boxes.

For More details about angularjs services, you may refer to this link.

answered Mar 27 '15 at 05:37

Manish Kr. Shukla

4,447
1
20
35

i have a controller for my first form and also for the second form,which is the password form. In which controller should i use your code? – CraZyDroiD Mar 27 '15 at 05:45
You can use it in both of them.. Won't make any difference to the persistence – Manish Kr. Shukla Mar 27 '15 at 05:54
and i have my model as ng-model="data.password" I have done all my work using it this way.. how to fix my problem? – CraZyDroiD Mar 27 '15 at 06:08
You please share a plunker, so that it can be refactored for the service based solution – Manish Kr. Shukla Mar 27 '15 at 06:20

score 0 · Answer 2 · edited May 23 '17 at 11:45

I don't use AngularJS, so I will approach with Javascript and jQuery. If Angular Service can give a solution for you, then go for it.

ref. Clear all fields in a form upon going back with browser back button

Modern browsers implement something known as back-forward cache (BFCache). When you hit back/forward button the actual page is not reloaded (and the scripts are never re-run).

If you have to do something in case of user hitting back/forward keys -- listen for BFCache pageshow and pagehide events.

A pseudo jQuery example:

  $(window).bind("pageshow", function() {
    // update hidden input field
  });

See more details for Gecko and WebKit implementations.

With BFCache and sessionStorage, you can do

on the form page,

  var input01 = $("#idName").val();
  sessionStorage.input01 = input01;

when you are back at it,

$(window).bind("pageshow", function(){
  $("#idNAme").val(sessionSotrage.input01);
});

retain data in forms when going to another form and coming back again

2 Answers2