将值存储在 java 或 javascript 中，以便可以将其传递给另一个 JSP

Question

我在此代码的第 11 行中获取总价值但是我怎样才能将其存储在 Java 或 JavaScript 变量中，以便我可以将此值传递给计费.jsp以以下形式。

--------------------------------------.HTML--------------------------------

  <div class="card-block">
<h4 class="card-title">Orange</h4>
<p class="card-text">Price: $5</p>
<a href="#" data-name="Orange" data-price="5">Add to cart</a> // Price of 
Orange gets added to Cart
</div>
<div class="card-block">
<h4 class="card-title">Banana</h4>
<p class="card-text">Price: $5</p>
<a href="#" data-name="Banana" data-price="5">Add to cart</a> // Price of 
Banana gets added to Cart 
</div>          
 Total price: $<span class="total-cart"></span>  // Here I am getting 
 total price of orange and banana lets say $10, how can I store this 
dynamically generated value to a javascript variable or in any other 
suitable java variable so that I can pass the value as input type hidden 
 in the below form??

   <div class="footer">
      <form name="billing" action="billing.jsp">           
    <input type="hidden" name="price" value=""/> // How can I pass this 
 total price $10 here to billing.jsp here 
    <input type="submit"/>
   </form>        
  </div>

----------------------JAVASCRIPT

----------------------

var shoppingCart = (function() {
 // =============================
 // Private methods and propeties
 // =============================
 cart = [];
// Constructor
 function Item(name, price, count) {
 this.name = name;
 this.price = price;
 this.count = count;
 }
  // Save cart
  function saveCart() {
  sessionStorage.setItem('shoppingCart', JSON.stringify(cart));
  }
  // Load cart
  function loadCart() {
   cart = JSON.parse(sessionStorage.getItem('shoppingCart'));
  }
   if (sessionStorage.getItem("shoppingCart") != null) {
    loadCart();
   }

  // Public methods and properties
  var obj = {};
  // Add to cart
  obj.addItemToCart = function(name, price, count) {
  for(var item in cart) {
  if(cart[item].name === name) {
    cart[item].count ++;
    saveCart();
    return;
  }
  }
  var item = new Item(name, price, count);
  cart.push(item);
  saveCart();
  }
  // Set count from item
  obj.setCountForItem = function(name, count) {
  for(var i in cart) {
  if (cart[i].name === name) {
    cart[i].count = count;
    break;
  }
 }
 };
 // Remove item from cart
  obj.removeItemFromCart = function(name) {
  for(var item in cart) {
    if(cart[item].name === name) {
      cart[item].count --;
      if(cart[item].count === 0) {
        cart.splice(item, 1);
      }
      break;
    }
  }
  saveCart();
  }
  // Remove all items from cart
  obj.removeItemFromCartAll = function(name) {
  for(var item in cart) {
  if(cart[item].name === name) {
    cart.splice(item, 1);
    break;
  }
 }
 saveCart();
 }
 // Clear cart
 obj.clearCart = function() {
 cart = [];
 saveCart();
 }
 // Count cart 
 obj.totalCount = function() {
  var totalCount = 0;
  for(var item in cart) {
  totalCount += cart[item].count;
  }
 return totalCount;
 }
  // Total cart
  obj.totalCart = function() {
  var totalCart = 0;
  for(var item in cart) {
  totalCart += cart[item].price * cart[item].count;
  }
  return Number(totalCart.toFixed(2));
  }
 // List cart
 obj.listCart = function() {
 var cartCopy = [];
 for(i in cart) {
  item = cart[i];
  itemCopy = {};
  for(p in item) {
    itemCopy[p] = item[p];
  }
  itemCopy.total = Number(item.price * item.count).toFixed(2);
  cartCopy.push(itemCopy)
 }
 return cartCopy;
 }
// cart : Array
// Item : Object/Class
// addItemToCart : Function
// removeItemFromCart : Function
// removeItemFromCartAll : Function
// clearCart : Function
// countCart : Function
// totalCart : Function
// listCart : Function
// saveCart : Function
// loadCart : Function
return obj;
})();

// *****************************************
// Triggers / Events
// ***************************************** 
// Add item
 $('.add-to-cart').click(function(event) {
  event.preventDefault();
  var name = $(this).data('name');
  var price = Number($(this).data('price'));
  shoppingCart.addItemToCart(name, price, 1);
  displayCart();
 });
 // Clear items
 $('.clear-cart').click(function() {
 shoppingCart.clearCart();
  displayCart();
  });

  function displayCart() {
  var cartArray = shoppingCart.listCart();
  var output = "";
  for(var i in cartArray) {
  output += "<tr>"
  + "<td>" + cartArray[i].name + "</td>" 
  + "<td>(" + cartArray[i].price + ")</td>"
  + "<td><div class='input-group'><button class='minus-item input-group- 
  addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>"
  + "<input type='number' class='item-count form-control' data-name='" + 
   cartArray[i].name + "' value='" + cartArray[i].count + "'>"
  + "<button class='plus-item btn btn-primary input-group-addon' data- 
  name=" 
  + cartArray[i].name + ">+</button></div></td>"
  + "<td><button class='delete-item btn btn-danger' data-name=" + 
  cartArray[i].name + ">X</button></td>"
  + " = " 
  + "<td>" + cartArray[i].total + "</td>" 
  +  "</tr>";
  }
  $('.show-cart').html(output);
  $('.total-cart').html(shoppingCart.totalCart());
  $('.total-count').html(shoppingCart.totalCount());
  }
 // Delete item button
  $('.show-cart').on("click", ".delete-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.removeItemFromCartAll(name);  
   displayCart();
  })

 // -1
 $('.show-cart').on("click", ".minus-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.removeItemFromCart(name);
  displayCart();
 })
  // +1
  $('.show-cart').on("click", ".plus-item", function(event) {
   var name = $(this).data('name')
  shoppingCart.addItemToCart(name);
  displayCart();
  })
  // Item count input
  $('.show-cart').on("change", ".item-count", function(event) {
   var name = $(this).data('name');
  var count = Number($(this).val());
  shoppingCart.setCountForItem(name, count);
  displayCart();
 });
 displayCart();

Answer 1

在

下面的函数中，您将调用totalCart()：

function displayCart() {
  ..
  $('.show-cart').html(output);
 <!--here you got that total price-->
  $('.total-cart').html(shoppingCart.totalCart());
  $('.total-count').html(shoppingCart.totalCount());
  }

从下面function你得到total price，只需添加那里document.getElementById('idofinput').value = something，所以每当调用这个函数时，总值都会在input中更新，也不要忘记给你的input id.i.e：

 // Total cart
      obj.totalCart = function() {
      var totalCart = 0;
      for(var item in cart) {
      totalCart += cart[item].price * cart[item].count;
      }
  //setting value for input field.
    document.getElementById('idofinput').value= Number(totalCart.toFixed(2));
      return Number(totalCart.toFixed(2));
      }

Answer 2

当 html 来自 JSP 时，请使用 scriplet 标签

当 HTML 由 JS 驱动时，JS从 API 获取值 尝试将 id="yourId" 属性添加到具有总购物车类的 span 元素 然后做 document.getElementById('yourId'(.textContent = value

Answer 3

您可以使用jQuery获得总价。
例如

Total price: $<span class="total-cart">200</span>

然后

$('span.total-cart').text();// Output is 200