Question

Front End of the Application，当我从下拉列表中选择商品时，如何计算商品的总价；当我选择该商品时，它可以在“每商品价格”行中获取价格，但是会出现一些问题总价和总计部分将不受影响，请告诉我如何解决此问题。这是我的应用程序的总体代码。

    <?php
 //load_data_select.php
 $connect = mysqli_connect("localhost", "root", "", "zzz");
 function processor_brand($connect)
 {
      $output = '';
      $sql = "SELECT * FROM product WHERE brand_name='Processor'";
      $result = mysqli_query($connect, $sql);
      while($row = mysqli_fetch_array($result))
      {
           $output .= '<option value="'.$row["product_id"].'">'.$row["product_name"].'</option>';
      }
      return $output;
 }
 ?>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head>
  <body>

  </body>
</html>
        <table>
        <tr>
            <th>
                ITEM
            </th>
            <th>
                QUANTITY
            </th>
            <th>
                Per Item Price
            </th>
            <th>
                Total Price
            </th>
        </tr>
        <tr class="txtMult">
            <td>
              <select name="brand" id="brand">
                <option>Show All Product</option>
                <?php echo processor_brand($connect); ?>
              </select>
            </td>
            <td>
                <input name="txtEmmail" id="price" class="val1"  />
            </td>
            <td>
                <input type="text" style="border:none" readonly id="show_product" name="txtEmmail" class="val2" >
            </td>
            <td>
                <span class="multTotal" id="show_product" readonly name="" value="">0.00</span>
            </td>
        </tr>
            <tr>
    <td colspan="6" style="border-top:1px solid black" align="right">
        Grand Total# <span id="grandTotal">0.00</span>
    </td>
</tr>
    </table>

<script type="text/javascript">
$(document).ready(function () {
     $(".txtMult input").keyup(multInputs);

     function multInputs() {
         var mult = 0;
         // for each row:
         $("tr.txtMult").each(function () {
             // get the values from this row:
             var $val1 = $('.val1', this).val();
             var $val2 = $('.val2', this).val();
             var $total = ($val1 * 1) * ($val2 * 1)
             $('.multTotal',this).text($total);
             mult += $total;
         });
         $("#grandTotal").text(mult);
     }
});
$(document).ready(function(){
     $('#brand').change(function(){
          var product_id = $(this).val();
          $.ajax({
               url:"load_data.php",
               method:"POST",
               data:{product_id:product_id},
               success:function(data){
                    $('#show_product').val(data);
                    document.getElementById("price").value = "1";
               }
          });
     });
});
</script>

load_data.php

   <?php
//load_data.php
$connect = mysqli_connect("localhost", "root", "", "zzz");
$output = '';
if(isset($_POST["product_id"]))
{
     if($_POST["product_id"] != '')
     {
          $sql = "SELECT * FROM product WHERE product_id = '".$_POST["product_id"]."'";
     }
     else
     {
          $sql = "SELECT * FROM product";
     }
     $result = mysqli_query($connect, $sql);
     while($row = mysqli_fetch_array($result))
     {
          $output .=$row["price"];
     }
     echo $output;
}
?>

Answer 1

只需在keyup事件外部带出mulInputs函数，并在keyup事件上使用适当的方法调用该函数。

替换下面的代码

    $(document).ready(function () {
     $(".txtMult input").keyup(multInputs);

     function multInputs() {
         var mult = 0;
         // for each row:
         $("tr.txtMult").each(function () {
             // get the values from this row:
             var $val1 = $('.val1', this).val();
             var $val2 = $('.val2', this).val();
             var $total = ($val1 * 1) * ($val2 * 1)
             $('.multTotal',this).text($total);
             mult += $total;
         });
         $("#grandTotal").text(mult);
     }
});
$(document).ready(function(){
     $('#brand').change(function(){
          var product_id = $(this).val();
          $.ajax({
               url:"load_data.php",
               method:"POST",
               data:{product_id:product_id},
               success:function(data){
                    $('#show_product').val(data);
                    document.getElementById("price").value = "1";
               }
          });
     });
});

与此

    function multInputs() {
             var mult = 0;
             // for each row:
             $("tr.txtMult").each(function () {
                 // get the values from this row:
                 var $val1 = $('.val1', this).val();
                 var $val2 = $('.val2', this).val();
                 var $total = ($val1 * 1) * ($val2 * 1)
                 $('.multTotal',this).text($total);
                 mult += $total;
             });
             $("#grandTotal").text(mult);
    }

    $(document).ready(function () {
         $(".txtMult input").keyup(function(){
          multInputs();
        });
    });

$(document).ready(function(){
     $('#brand').change(function(){
          var product_id = $(this).val();
          $.ajax({
               url:"load_data.php",
               method:"POST",
               data:{product_id:product_id},
               success:function(data){
                    $('#show_product').val(data);
                    document.getElementById("price").value = "1";
                    multInputs();
               }
          });
     });
});

javascript可以在运行之前快速扫描所有代码，因此在调用函数之前或之后定义函数的位置无关紧要，但是首选方法是在调用该函数之前声明函数。

您还使用了诸如品牌，show_product和价格之类的ID的另一件事，这不是好习惯，因为根据W3c标准，我们不能在同一页面上使用相同的ID。

如果您使用的行多于1行，则此代码将无法运行，因此您需要在此处改进一些逻辑。

致谢

总价和总价未在PHP

1 个答案: