将javascript值传递给jsp

时间:2019-06-05 08:36:48

标签: javascript java jquery jsp

即使在home.jsp中获取ID为“ idofinput”的购物车的总值后,在billing.jsp中也没有获得任何价值,也请告诉我我在哪里错了??

--------------------------------- home.jsp ----------- ----------------

 <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, I stored this 
dynamically generated value to a javascript variable "idofinput" in 
JAVASCRIPT file written in last, 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" id="idofinput"name="price"/> // Here total price 
 $10 is not getting passed to billing.jsp,how can I pass it?? 
    <input type="submit"/>
   </form>        
  </div>

-------------------------------- billing.jsp ------------ ---------

<%

String price=""; 

 price=request.getParameter("price").toString();
 out.println(price);   %> //Nothing displays

--------------------------- Javascript ------------------- --------

var shoppingCart = (function() {
 // =============================
 // Private methods and properties
 // =============================
 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;
  }

   document.getElementById('idofinput').value=Number(totalCart.toFixed(2)); 
   // Here I gave an input "IDOFINPUT" to call it in input type in form in 
      home.jsp

  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();

0 个答案:

没有答案