Question

我在此代码的第11行中获得总价的值但是如何将其存储在java或javascript变量中，以便可以将该值以以下形式传递给billing.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中更新，也不要忘记将id捐给您的input。即：

 // 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标签

当js驱动html且js从api获取值时尝试将id =“ yourId”属性添加到具有total-cart类的span元素然后执行document.getElementById（'yourId'）。textContent = value

Answer 3

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

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

然后

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

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

3 个答案: