What is the method for transferring form data to a different page?

Question

What is the method for transferring form data to a different page?

Currently utilizing AngularJS version 1.5.6 and looking for guidance on properly passing form data using $location.path.

Below is my code snippet for Page A:

<form>
...
    <button type="submit" ng-click="submit(formData)">submit</button>
</form>

JavaScript code:

app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {
  templateUrl: "A.html", 
  controller: "ACtrl"
})
.when("/B/", {
  templateUrl: "B.html", 
  controller: "BCtrl"
})
  //fallback url if nothing matches
.otherwise({
  redirectTo: '/'
}); 
}]); 
app.controller('ACtrl', function ( $scope, $location, $http) {
$scope.formData = {};
$scope.submit = function() {
    $location.path("/B/" + $scope.formData );
};
});
//controller for B page
app.controller('BCtrl', ['$scope', '$routeParams',
function($scope,$routeParams) {

$scope.formData = $routeParams.formData;
}]);

This example may seem straightforward, but I'm struggling to find a solution :(

When clicking submit, nothing happens. If I remove the $scope from $scope.formData, I receive an error stating "Error: formData is not defined."

The values in formData are accessible, as confirmed by testing with console.log($scope.formData).

Here is the link to the Plunker: https://plnkr.co/edit/K5zwcmRRyom5HR4a5Q9o

EDIT

The only remaining issue is how to correctly handle the select object in the foreach loop. Assistance would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

To achieve this, one method is to create a service and utilize setter/getter functions for transferring a variable. Here's an example implementation: https://plnkr.co/edit/IuTXsVLU7dq3TylfnSYP?p=preview

app.service('TransferService', [function(){

 var savedData,
 service = {
   getData: getData,
   setData: setData
 }

 function getData(){
   return savedData
 }

 function setData(data){
   savedData = data
 }

 return service
}])

Answer 2

To achieve this, one method is to create a service and utilize setter/getter functions for transferring a variable. Here's an example implementation: https://plnkr.co/edit/IuTXsVLU7dq3TylfnSYP?p=preview

app.service('TransferService', [function(){

 var savedData,
 service = {
   getData: getData,
   setData: setData
 }

 function getData(){
   return savedData
 }

 function setData(data){
   savedData = data
 }

 return service
}])

Answer 3

Answer №2

Avoid using location.path...

You have the option to utilize a service or leverage browser storage such as localstorage, sessionStorage, or indexdb.

Service Method Provided Below

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

    var value = null;

    this.set = function (val) {
        value = val;
        return this;
    }

    this.get = function () {
        return value;
    } 
})

app.controller("ACtrl", function ($scope, SomeService) {

    $scope.formData = {};
    $scope.submit = function() {

        //If you've inputted data...
        SomeService.set($scope.formData);

        $location.path("/B/");
    };

})

app.controller("BCtrl", function ($scope, SomeService) {

    $scope.formData;

    (function () {

        //Checking if the data is stored in the SomeService service.
        var dataFromACtrl = SomeService.get();
        if (dataFromACtrl) {
            $scope.formData = dataFromACtrl;
        }
    })();
})

Using localStrorage below, can also use sessionStorage.

app.controller("ACtrl", function ($scope, SomeService) {

    $scope.formData = {};
    $scope.submit = function() {

        //If you've populated it with some data...
        window.localStorage.setItem("form_data", JSON.stringify($scope.form_data));
        $location.path("/B/");
    };

})

app.controller("BCtrl", function ($scope, SomeService) {

    $scope.formData;

    (function () {
        var dataFromACtrl = window.localStorage.getItem("form_data");
        if (dataFromACtrl) {
            $scope.formData = JSON.parse(dataFromACtrl);
        }
    })();
})

Note:

If using the localStorage example, remember to clean up after using the data in Bctrl by removing the entry from localstorage with either of the following lines of code:

window.localStorage.removeItem("form_data");

delete window.localStorage["form_data"];

Answer 4

Avoid using location.path...

You have the option to utilize a service or leverage browser storage such as localstorage, sessionStorage, or indexdb.

Service Method Provided Below

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

    var value = null;

    this.set = function (val) {
        value = val;
        return this;
    }

    this.get = function () {
        return value;
    } 
})

app.controller("ACtrl", function ($scope, SomeService) {

    $scope.formData = {};
    $scope.submit = function() {

        //If you've inputted data...
        SomeService.set($scope.formData);

        $location.path("/B/");
    };

})

app.controller("BCtrl", function ($scope, SomeService) {

    $scope.formData;

    (function () {

        //Checking if the data is stored in the SomeService service.
        var dataFromACtrl = SomeService.get();
        if (dataFromACtrl) {
            $scope.formData = dataFromACtrl;
        }
    })();
})

Using localStrorage below, can also use sessionStorage.

app.controller("ACtrl", function ($scope, SomeService) {

    $scope.formData = {};
    $scope.submit = function() {

        //If you've populated it with some data...
        window.localStorage.setItem("form_data", JSON.stringify($scope.form_data));
        $location.path("/B/");
    };

})

app.controller("BCtrl", function ($scope, SomeService) {

    $scope.formData;

    (function () {
        var dataFromACtrl = window.localStorage.getItem("form_data");
        if (dataFromACtrl) {
            $scope.formData = JSON.parse(dataFromACtrl);
        }
    })();
})

Note:

If using the localStorage example, remember to clean up after using the data in Bctrl by removing the entry from localstorage with either of the following lines of code:

window.localStorage.removeItem("form_data");

delete window.localStorage["form_data"];

What is the method for transferring form data to a different page?

EDIT

Answer №1

Answer №2

Similar questions

Sending JavaScript functions to PHP files via Ajax

Node.js accepts JSON data sent via XMLHttpRequest

Visual Studio Code's Intellisense is capable of detecting overloaded functions in JavaScript

What could be the reason for the Mongoose findAll function causing a 500 error to occur?

Guide to iterating through an array within an object in Vue.js

Comparing a series of smaller strings to a larger string for testing purposes

Having difficulty initializing jQuery DataTables upon button click with an Ajax request

New to Angular: Getting Started with NgModel Binding

Having trouble getting the Google motion chart to work with asynchronous JSON requests

The pie chart is unable to render due to issues with accessing the external JSON file in Ext

The response time feature appears to be malfunctioning within Mockjax

How to make an entire video clickable on Android for seamless playback?

Add one string to an existing array

What is the best way to modify the styling of my CSS attributes?

Guide on how to add multiple options to a select element in HTML using prototype.js

Is it possible to use multiple schemas for one collection name?

NGRX Store: Unable to modify the immutable property '18' of the object '[object Array]'

Move to the following <article>

The $http.then callback is failing to be executed

Dynamic shopping cart with Vue.js