Question posted in
You can find the official documentation here.

jquery-ajax pass html element value from one page to another – Jquery ajax

I have built a single page app using angularJS routing . I have a cart page where a user has selected products and can proceed to checkout .
enter image description here

If you click on the button you get redirected to the checkout page .

enter image description here

The problem is that I have the total cost hard coded and I want to pass it from the product page to the checkout page using jquery or ajax . I can obviously use localstorage but If I switch back to my product page and edit the price and then return to checkout ,since no reload happens localstorage shows the previous total . This is why I need a jquery or ajax solution .

My code :

//-----Click Checkout button ------
  $("#checkOut").click(()=>{
    //get count of products 
    var numOfProducts = $('.product-columns').length;
    if(numOfProducts!=0){
      //pass total cost to variable 
      var total = $('.FinalTotal').text(); 
      //append total cost to html total cost element of checkout.php 
      window.location.href='../php/index.php#!/purchase';
    }else{
      alert("Your cart is empty");
    }
  });

total from products.php

 <p> Total </p>
  <span class="new__price FinalTotal">$0</span>
 <a href="" id ="checkOut">PROCEED TO CHECKOUT</a>

purchase.php

<h2 id = "totalPrice"> Total Price :  </h2>

angularjs routing for a single page app

app.config(($routeProvider)=>{
  $routeProvider
    .when("/" , {templateUrl:"main.php"})
    .when("/login" , {templateUrl : "login.php"})
    .when("/register" , {templateUrl : "register.php"})
    .when("/results" , {templateUrl : "showResults.php"})
    .when("/purchase", {templateUrl:"purchase.php"})
    .when("/cart" ,{templateUrl:"products.php"});
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is what I did to make this work using localstorage and ajax :

    //-----Checkout------
  $("#checkOut").click(()=>{
    //get count of products 
    var numOfProducts = $('.product-columns').length;
    var subtotal = parseInt($('#fullSubTotal').text().replace('$','')); 
    var shipping = parseInt(localStorage.getItem('shipping').replace('$',''));
    localStorage.setItem('subtotal', $('#fullSubTotal').text());
    var sum = shipping +subtotal;
    var total = `$` + `${sum}`;
    if(numOfProducts!=0){
      //pass total cost 
      $.ajax({
         type:'POST',
         data:{totalPurchase:total},
         success:()=>{
          window.location.href='../php/index.php#!/purchase';
          $("#totalOnPurchase").html(`Total: `+`${total}`);
         }
      });

    }else{
      alert("Your cart is empty");
    }
  });

  2. 0

    There are multiple ways of passing data between your pages :

    1. Use params in routes.

    Since you are already using $routeProvider, there’s no need to navigate using window.location.href, you can use $location.path.

        app.config(($routeProvider)=>{
      $routeProvider
    .when("/" , {templateUrl:"main.php"})
    .when("/login" , {templateUrl : "login.php"})
    .when("/register" , {templateUrl : "register.php"})
    .when("/results" , {templateUrl : "showResults.php"})
    .when("/purchase/:cost", {templateUrl:"purchase.php"}) //add the cost as the route param.
    .when("/cart" ,{templateUrl:"products.php"});
});

    Now, when routing to your purchase page:

     $location.path('/purchase/'+cost);

    In your purchase controller, inject $routeParams and access the cost as:

    app.controller('purchaseController', function($scope,$routeParams) {
      $scoope.totalCost = $routeParams.cost;
});

    1. You can use services where you can set the value of cost in one controller and access it in another.

       var app = angular.module('yourModule',[]);
 app.service("dataService",function(){
    var totalCost = "";
    setCost: function(cost){
      totalCost = cost;
    },
    getCost: function(){
     return totalCost;
   }
});

    In your product controller, inject dataService and use the setCost Method.

    app.controller('productsController', function($scope, dataService) {
      dataService.setCost(totalCost);
});

    Next, in your PurchaseController, access the value:

    app.controller('purchaseController', function($scope, dataService) {
      $scope.totalCost = dataService.getCost();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search