Question

用户填写数据后，单击“生成报告”进行确认。用户单击“生成报告”按钮后，将显示确认页面。问题是，它只显示用户插入的数量数据。现在我要显示“预售价”，“数量”，“物品价格”

我试图在foreach语句中插入多个变量，以便我可以查看用户插入的所有数据。怎么解决？

<html>

<body>

  <table>
    <!-- Table Header -->
    <form action="extra.php" method="post">
      <thead>
        <tr>
          <td><span class="icon icon-tag"></span> Item</td>
          <td><span class="icon icon-layers"></span> Surface</td>
          <td><span class="icon icon-tag"></span> Unit Price</td>
          <td><span class="icon icon-cursor-move"></span> Quantity</td>
          <td><span class="icon icon-basket"></span> Item Price</td>
        </tr>
      </thead>
      <!-- End of Table Header -->

      <!-- Table Body -->
      <tbody>
        <tr>
          <td><strong>Wardrobes</strong></td>
          <td>
            <div class="btn-group"></div>
          </td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <script>
          function getTotal() {
            var total = 0;
            for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
              var price = document.getElementById('unitprice_' + i).value;
              var quantity = document.getElementById('quantity_' + i).value;
              var subtotal = price * quantity;
              document.getElementById('subtotal_' + i).value = subtotal.toFixed(2);
              total += subtotal;
            }
            document.getElementById("total").value = total.toFixed(2);
          }
          window.onload = function() {
            for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
              document.getElementById('quantity_' + i).onkeyup = getTotal;
            }
            getTotal();
          }
        </script>

        <tr class="tr-item">
          <td>Full height Wardrobe (Swing door)</td>
          <td>
            <script>
              function myFunction1(btn1) {
                document.getElementById("unitprice_0").value = btn1;
              }
            </script>
            <div class="btn-group surface-options-group">
              <button type="button" name="btn1" onclick="myFunction1(this.value)" value="360">Laminates</button>
              <button type="button" name="btn1" onclick="myFunction1(this.value)" value="240">Veneer</button>
            </div>
          </td>
          <td>SGD$<input type="text" name="unitprice" id="unitprice_0" value="360" size="1" readonly></td>&nbsp;
          </td>
          <td>
            <input type="number" name="quantity[Full height Wardrobe (Swing door)]" id="quantity_0" min="0" max="10000" value="0">
            <span class="quantity-unit">ft.</span>
          </td>
          <td><input type="text" name="subtotal" id="subtotal_0" size="5" maxlength="9" value="0" readonly/> </td>
        </tr>


        <tr id="tr-item-2" class="tr-item">
          <td>Full height Wardrobe (Normal sliding door)</td>
          <td>
            <div class="btn-group surface-options-group">
              <button type="button" name="btn2" onclick="myFunction2(this.value)" value="360">Laminates</button>
              <button type="button" name="btn2" onclick="myFunction2(this.value)" value="240">Veneer</button>
            </div>
            <script>
              function myFunction2(btn2) {
                document.getElementById("unitprice_1").value = btn2;
              }
            </script>
          </td>
          <td>SGD$<input type="text" name="unitprice" id="unitprice_1" value="360" size="1" readonly></td>&nbsp;
          </td>
          <td>
            <input type="number" name="quantity[Full height Wardrobe (Normal sliding door)]" id="quantity_1" min="0" max="10000" value="0">
            <span class="quantity-unit">ft.&nbsp;&nbsp;SGD$</span>
          </td>
          <td><input type="text" name="subtotal" id="subtotal_1" size="5" maxlength="9" value="0.00" readonly/> </td>
        </tr>

        <tr class="tr-item">
          <td>Full height Open Wardrobe</td>
          <td>
            <div class="btn-group surface-options-group">
              <button type="button" name="btn3" onclick="myFunction3(this.value)" value="200">Polyken</button>
              <button type="button" name="btn3" onclick="myFunction3(this.value)" value="330">Veneer</button>
            </div>
            <script>
              function myFunction3(btn3) {
                document.getElementById("unitprice_2").value = btn3;
              }
            </script>
          </td>
          <td>SGD$<input type="text" name="unitprice" id="unitprice_2" value="200" size="1" readonly></td>&nbsp;
          </td>
          <td>
            <input type="number" name="quantity[Full height Open Wardrobe]" id="quantity_2" min="0" max="10000" value="0">
            <span class="quantity-unit">ft.&nbsp;&nbsp;SGD$</span>
          </td>
          <td><input type="text" name="subtotal_2" id="subtotal_2" size="5" maxlength="9" value="0.00" readonly/> </td>
        </tr>
  </table>
  <br>
  <br>
  <center><button type="submit" name="btUpdate">Generate Report</button></center>
  </div>
  <div id="pricing-total">
    <h3><span class="icon icon-calculator"></span> Total Price</h3>
    <p>SGD$<input type="text" id="total" value="0" /></p>
  </div>

  </form>
  <script type="text/javascript" src="js/script.js"></script>
</body>

</html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Confirmation Page</title>
    </head>
    <body>
        <?php
        //Get the input.
        if (isset($_POST['btUpdate'])) {
            $stockData = $_POST['quantity'];
			
        }
        ?>
        <p> Confirmation.</p>
        <table width="559" border="1" cellpadding="5" cellspacing="0">
            <tr>
                <th width="407">Product</th>
                <th width="126">Per Price</th>
                <th width="126">Quantity</th>
                <th width="126">Iteam Price</th>
            </tr>
            <?php
            $stock_total = 0;
			
            foreach ($stockData as $key => $value) {
				       
                ?>
                <?php
                $stock_total = $stock_total + $value;
                if (!empty($value)) {
                    ?>
                    <tr> 
                        <td><?php echo $key; ?></td>
                        <td></td>
                        <td><?php echo $value; ?></td>
                        <td></td>
                        
                        
                    </tr>
            <?php  }
            } ?>

            <tr>
                <td >Total Items</td>
                <td width="126"><?php print $stock_total; ?></td>
            </tr>
        </table>
    </body>
</html>

Answer 1

我为所有输入创建了数组，即产品，单价，数量和小计。点击按钮，在产品的隐藏输入形式中更改单价和产品名称。还重新计算小计和总计。

<html>

<body>
    <form action="extra.php" method="post">
  <table>
    <!-- Table Header -->
      <thead>
        <tr>
          <td><span class="icon icon-tag"></span> Item</td>
          <td><span class="icon icon-layers"></span> Surface</td>
          <td><span class="icon icon-tag"></span> Unit Price</td>
          <td><span class="icon icon-cursor-move"></span> Quantity</td>
          <td><span class="icon icon-basket"></span> Item Price</td>
        </tr>
      </thead>
      <!-- End of Table Header -->

      <!-- Table Body -->
      <tbody>
        <tr>
          <td><strong>Wardrobes</strong></td>
          <td>
            <div class="btn-group"></div>
          </td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr class="tr-item">
          <td>Full height Wardrobe (Swing door)</td>
          <td>
            <script>
              function myFunction1(btn1) {
                document.getElementById("unitprice_0").value = btn1;
                document.getElementById("product_0").value = "Full height Wardrobe (Swing door) - " + btn1.textContent;
                document.getElementById("unitprice_0").value = btn1.value;
              }
            </script>
            <div class="btn-group surface-options-group">
              <button type="button" name="btn1" onclick="myFunction1(this);getTotal();" value="360">Laminates</button>
              <button type="button" name="btn1" onclick="myFunction1(this);getTotal();" value="240">Veneer</button>
            </div>
            <input type="hidden" name="product[]" value="Full height Wardrobe (Swing door) - Laminates" id="product_0" />
          </td>
          <td>SGD$<input type="text" name="unitprice[]" id="unitprice_0" value="360" size="1" readonly></td>&nbsp;
          </td>
          <td>
            <input type="number" name="quantity[]" id="quantity_0" min="0" max="10000" value="0">
            <span class="quantity-unit">ft.</span>
          </td>
          <td><input type="text" name="subtotal[]" id="subtotal_0" size="5" maxlength="9" value="0" readonly/> </td>
        </tr>


        <tr id="tr-item-2" class="tr-item">
          <td>Full height Wardrobe (Normal sliding door)</td>
          <td>
            <div class="btn-group surface-options-group">
              <button type="button" name="btn2" onclick="myFunction2(this);getTotal();" value="360">Laminates</button>
              <button type="button" name="btn2" onclick="myFunction2(this);getTotal();" value="240">Veneer</button>
            </div>
              <input type="hidden" name="product[]" value="Full height Wardrobe (Normal sliding door) - Laminates" id="product_1" />
            <script>
              function myFunction2(btn2) {
                document.getElementById("product_1").value = "Full height Wardrobe (Normal sliding door) - " + btn2.textContent;
                document.getElementById("unitprice_1").value = btn2.value;
              }
            </script>
          </td>
          <td>SGD$<input type="text" name="unitprice[]" id="unitprice_1" value="360" size="1" readonly></td>&nbsp;
          </td>
          <td>
            <input type="number" name="quantity[]" id="quantity_1" min="0" max="10000" value="0">
            <span class="quantity-unit">ft.&nbsp;&nbsp;SGD$</span>
          </td>
          <td><input type="text" name="subtotal[]" id="subtotal_1" size="5" maxlength="9" value="0.00" readonly/> </td>
        </tr>

        <tr class="tr-item">
          <td>Full height Open Wardrobe</td>
          <td>
            <div class="btn-group surface-options-group">
              <button type="button" name="btn3" onclick="myFunction3(this);getTotal();" value="200">Polyken</button>
              <button type="button" name="btn3" onclick="myFunction3(this);getTotal();" value="330">Veneer</button>
            </div>
              <input type="hidden" name="product[]" value="Full height Open Wardrobe - Polyken" id="product_2" />
            <script>
              function myFunction3(btn3) {
                document.getElementById("product_2").value = "Full height Open Wardrobe - " + btn3.textContent;
                document.getElementById("unitprice_2").value = btn3.value;                
              }
            </script>
          </td>
          <td>SGD$<input type="text" name="unitprice[]" id="unitprice_2" value="200" size="1" readonly></td>&nbsp;
          </td>
          <td>
            <input type="number" name="quantity[]" id="quantity_2" min="0" max="10000" value="0">
            <span class="quantity-unit">ft.&nbsp;&nbsp;SGD$</span>
          </td>
          <td><input type="text" name="subtotal[]" id="subtotal_2" size="5" maxlength="9" value="0.00" readonly/> </td>
        </tr>
  </table>
  <br>
  <br>
  <center><button type="submit" name="btUpdate">Generate Report</button></center>
  </div>
  <div id="pricing-total">
    <h3><span class="icon icon-calculator"></span> Total Price</h3>
    <p>SGD$<input type="text" name="grandtotal"  id="total" value="0" readonly /></p>
  </div>

  </form>
<!--  <script type="text/javascript" src="js/script.js"></script>-->
        <script>
          function getTotal() {
            var total = 0;
            for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
              var price = document.getElementById('unitprice_' + i).value;
              var quantity = document.getElementById('quantity_' + i).value;
              var subtotal = price * quantity;              
              console.log(price + "   " + quantity);
              document.getElementById('subtotal_' + i).value = subtotal.toFixed(2);
              total += subtotal;
            }
            document.getElementById("total").value = total.toFixed(2);
          }
          window.onload = function() {
            for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
              document.getElementById('quantity_' + i).onchange = getTotal;
            }
            getTotal();
          };
        </script>
</body>

</html>

extra.php

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Confirmation Page</title>
    </head>
    <body>
        <p> Confirmation.</p>
        <table width="559" border="1" cellpadding="5" cellspacing="0">
            <tr>
                <th width="407">Product</th>
                <th width="126">Per Price</th>
                <th width="126">Quantity</th>
                <th width="126">Iteam Price</th>
            </tr>
                    <?php 
                    $i=0;
                    $total_items = 0;
                    foreach($_POST["product"] as $key) {
                        If($_POST["quantity"][$i]!=0) {
                        echo "<tr>";
                        echo "<td>".$_POST["product"][$i]."</td>";
                        echo "<td>".$_POST["unitprice"][$i]."</td>";
                        echo "<td>".$_POST["quantity"][$i]."</td>";
                        echo "<td>".$_POST["subtotal"][$i]."</td>";
                        echo "</tr>";
                        } 
                        $total_items += $_POST["quantity"][$i];

                        $i++;
                    }                  

                    ?>

            <tr>
                <td >Total Items</td>
                <td colspan="2"><?php echo $total_items; ?></td>
                <td>Total - <?php echo $_POST["grandtotal"] ?></td>
            </tr>
        </table>
    </body>
</html>

确认页面和foreach声明

1 个答案: