加入购物车&在HTML中检查

时间:2015-03-03 10:57:36

标签: javascript html-table

我可以添加"添加到购物车"和"结帐"按钮在这里?

我想我需要重新编写所有这些才能创建这个按钮,因为我认为它需要更多的PHP内容。任何提示或答案?



 var Cost;

 function tally() {
     Cost = 0;
     if (document.orderform.item1.checked) {
       val = document.getElementById("Item1").value;
       Cost = Cost + (val * 1765.00);
     }
     if (document.orderform.item2.checked) {
       val = document.getElementById("Item2").value;
       Cost = Cost + (val * 1765.00);
     }
     if (document.orderform.item3.checked) {
       val = document.getElementById("Item3").value;
       Cost = Cost + (val * 9900.00);
     }
     if (document.orderform.item4.checked) {
       val = document.getElementById("Item4").value;
       Cost = Cost + (val * 5060.00);
     }
     if (document.orderform.item5.checked) {
       val = document.getElementById("Item5").value;
       Cost = Cost + (val * 6600.00);

       Cost = peso(Cost);

       document.orderform.Total.value = "P" + Cost;
     }

     function peso(amount) {
       amount = parseInt(amount * 100);
       amount = parseFloat(amount / 100);
       var x = Math.floor(amount);

       if (amount == x && (amount - x) == 0) {
         amount = amount + ".00";
         return amount;
       }

       if ((amount * 10) - (x * 10) == 0) {
         amount = amount + "0";
         return amount;
       }

       if ((amount * 100) - (x * 100) == 0) {
         amount = amount;
         return amount;
       }
       return amount;
     }

     function CalculateTotal(orderform) {
       Cost = 0;

       if (document.orderform.item1.checked) {
         val = document.getElementById("Item1").value;
         Cost = Cost + (val * 1765.00);
       }
       if (document.orderform.item2.checked) {
         val = document.getElementById("Item2").value;
         Cost = Cost + (val * 1765.00);
       }
       if (document.orderform.item3.checked) {
         val = document.getElementById("Item3").value;
         Cost = Cost + (val * 9900.00);
       }
       if (document.orderform.item4.checked) {
         val = document.getElementById("Item4").value;
         Cost = Cost + (val * 5060.00);
       }
       if (document.orderform.item5.checked) {
         val = document.getElementById("Item5").value;
         Cost = Cost + (val * 6600.00);
       }
       Cost = peso(Cost);

       document.orderform.Total.value = "P" + Cost;
     }

<html>

<head>
  <title>Nike</title>
</head>

<body>
  <table align=center width=1100 cellspacing=20>
    <tr>
      <td>
        <center>

          <body text="white">
            <img src="banner2.jpg">
        </center>
        <center>
          <div id="wrap">
            <ul class="navbar">
              <li> <a href="Main.html">Home</a>
              </li>
              <li> <a href="Products.html">Products</a>
                <ul>
                  <li> <a href="adidas.html">Adidas</a>
                  </li>
                  <li> <a href="Nike.html">Nike</a>
                  </li>
                </ul>
                <li><a href="login.php">Log-in</a>
                  <ul>
                    <li><a href="register.php">Register</a>
                    </li>
                  </ul>
                  <li><a href="About Us.html">About Us</a>
                  </li>
                  <li><a href="Contact Us.html">Contact Us</a>
                  </li>
          </div>
          <br>
          <br>
          <center>
            <frameset cols="25%,*,25%">
              <form method="post" name="orderform">
                <table border="1" width="100%">
                  <tr>
                    <td></td>
                    <td><font color="white"><center>Name</font>
                    </td>
                    <td width=70><font color="white"><center>Price</font>
                    </td>
                    <td width="25%"><font color="white"><center>Picture</font>
                    </td>
                    <td><font color="white"><center>Description</font>
                    </td>
                    <td><font color="white"><center>Stocks</font>
                    </td>
                    <td><font color="white"><center>Quantity</font>
                    </td>
                  </tr>
            </frameset>

            <tr>
              <td>
                <input type="checkbox" name="item1" value="item1_chosen" onclick="tally()">
              </td>
              <td><font color="white"><center>Kobe BHM<br>Men's T-shirt</font>
              </td>
              <td><font color="white"><center>P1,765.00</font>
              </td>
              <td>
                <img src="nike\1.jpg" width=257 height=200>
              </td>
              <td><font color="white">
	<ul>
		<li>Ribbed crew neck with interior taping</li>
		<li>Fabric: 100% cotton</li>
		<li>Machine Wash</li>
	</ul></font>
              </td>
              <td><font color="white"><center>5</font>
              </td>
              <td>
                <center>
                  <select name="Item1" onChange="CalculateTotal(orderform)" id="Item1">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                  </select>
              </td>
            </tr>

            <tr>
              <td>
                <input type="checkbox" name="item2" value="item2_chosen" onclick="tally()">
              </td>
              <td><font color="white"><center>KD BHM<br>Men's T-shirt</font>
              </td>
              <td><font color="white"><center>P1,765.00</font>
              </td>
              <td>
                <img src="nike\2.jpg" width=257 height=200>
              </td>
              <td><font color="white">
	<ul>
		<li>Ribbed crew neck with interior taping</li>
		<li>Fabric: 100% cotton</li>
		<li>Machine Wash</li>
	</ul></font>
              </td>
              <td><font color="white"><center>5</font>
              </td>
              <td>
                <center>
                  <select name="Item2" onChange="CalculateTotal(orderform)" id="Item2">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                  </select>
              </td>
            </tr>

            <tr>
              <td>
                <input type="checkbox" name="item3" value="item3_chosen" onclick="tally()">
              </td>
              <td><font color="white"><center>Flyknit Air Max</font>
              </td>
              <td><font color="white"><center>P9,900.00</font>
              </td>
              <td>
                <img src="nike\3.jpg" width=257 height=230>
              </td>
              <td><font color="white">
	<ul>
		<li>Full-length Max Air for maximum, flexible cushioning</li>
		<li>Ultralight Flyknit upper</li>
		<li>Flywire tech integrates with the laces for a dynamic, supportive fit</li>
		<li>Sculpted Cushion for plush cushioning, springy resilience and impact protection</li>
		<li>Flex grooves align with the Max Air unit for more natural range of motion</li>
		<li>Reflective elements enhance visibility in low light</li>
		<li>Weight: 12.8 ounces (Men's size 10)</li>
	</ul></td></font>
              </td>
              <td><font color="white"><center>5</font>
              </td>
              <td>
                <center>
                  <select name="Item3" onChange="CalculateTotal(orderform)" id="Item3">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                  </select>
              </td>
            </tr>

            <tr>
              <td>
                <input type="checkbox" name="item4" value="item4_chosen" onclick="tally()">
              </td>
              <td><font color="white"><center>Nike Air Zoom Pegasus 31 Flash</font>
              </td>
              <td><font color="white"><center>P5,060.00</font>
              </td>
              <td>
                <img src="nike\4.jpg" width=257 height=220>
              </td>
              <td><font color="white">
	<ul>
		<li>Nike Zoom Air unit under the heel delivers low-profile, highly responsive cushioning</li>
		<li>Ultralight three-layer mesh upper repels water to help keep feet dry while providing superior support and ventilation</li>
		<li>Allover reflectivity enhances visibility in low light</li>
		<li>Waffle outsole with environmentally preferred rubber for durability and exceptional multi-surface traction</li>
		<li>Weight: 11 ounces (Men's size 10)</li>
	</ul>
    </td></font>
                <td><font color="white"><center>5</font>
                </td>
                <td>
                  <select name="Item4" onChange="CalculateTotal(orderform)" id="Item4">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                  </select>
                </td>
            </tr>

            <tr>
              <td>
                <input type="checkbox" name="item5" value="item5_chosen" onclick="tally()">
              </td>
              <td><font color="white"><center>KD7</font>
              </td>
              <td><font color="white"><center>P6,600.00</font>
              </td>
              <td>
                <img src='nike\5.jpg' width=257 height=200>
              </td>
              <td><font color="white">
	<ul>
		<li>Flywire design and midfoot strap provide lightweight lockdown</li>
		<li>Hybrid design blends flexibility and support to give you speed and strength on every step</li>
		<li>Visible Nike Zoon Unit delivers ultra-responsive cushioning</li>
		<li>Hyperposite construction helps support the rear foot</li>
		<li>Rubber outsole for durability and traction</li>
	</ul>
    </td></font>
                <td><font color="white"><center>5</font>
                </td>
                <td>
                  <select name="Item5" onChange="CalculateTotal(orderform)" id="Item5">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                  </select>
                </td>
            </tr>
            </table>
            <br>
            <font size=5 font color="white">Total <input type="text" name="Total" value="P0" size="7"></font>

            </form>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

你真的没有很好地解释你的问题,所以我所能做的就是回答你提出的问题。

  

我可以在这里添加“添加到购物车”和“结帐”按钮吗?

是的,您可以轻松地将html按钮添加到表单中以进行结帐或添加到购物车。看看你的页面,我无法确切地知道页面应该是什么,但只是猜测,它是一个通用列表,你可以选择右边的数量并使用左边的复选框来确定哪些采取行动 - 添加到购物车或立即检查选定的项目。

只需在按钮的任何位置添加html,然后添加一些ajax jquery调用来处理服务器上的调用(php)。

至于提示/建议: 如果您的产品完全是静态的,那么您根本不需要重写所拥有的产品。但是,在计算价格时,实际上是在服务器上计算它而不是信任从客户端发送的数据。如果您的产品必然会发生变化,您应该真正从数据库中读取数据并根据该数据填充您的页面......