通过jquery和ajax显示单个总价

时间:2018-11-24 10:49:10

标签: php jquery mysql ajax

当我们选择这些字段时,我想显示通过jquery和ajax选择的单个项目的价格,税额和总计。基本上我必须通过以一种形式选择多个项目来订购快递订单,并显示它们各自的总金额。在空白的输入字段中,并显示已订购的总量

Index.Php文件

     <?php

    $connect = new PDO("mysqli:host=localhost;dbname=testing", "root", "");

    function fill_weight_select_box($connect)
    { 
     $output1 = '';
     $query1 = "SELECT * FROM weights ORDER BY wid ASC";
     $statement1 = $connect->prepare($query1);
     $statement1->execute();
     $result1 = $statement1->fetchAll();
     foreach($result1 as $row1)
     {
      $output1 .= '<option value="'.$row1["rate"].'">'.$row1["weight"].'</option>';
     }
     return $output1;
    }

    function fill_mode_select_box($connect)
    { 
     $output = '';
     $query = "SELECT * FROM modes ORDER BY mid ASC";
     $statement = $connect->prepare($query);
     $statement->execute();
     $result = $statement->fetchAll();
     foreach($result as $row)
     {
      $output .= '<option value="'.$row["rate"].'">'.$row["mode"].'</option>';
     }
     return $output;
    }

    function fill_distance_select_box($connect)
    { 
     $output2 = '';
     $query2 = "SELECT * FROM distances ORDER BY did ASC";
     $statement2 = $connect->prepare($query2);
     $statement2->execute();
     $result2 = $statement2->fetchAll();
     foreach($result2 as $row2)
     {
      $output2 .= '<option value="'.$row2["rate"].'">'.$row2["distance"].'</option>';
     }
     return $output2;
    }    
    function fill_tax_select_box($connect)
    { 
     $output3 = '';
     $query3 = "SELECT * FROM gst ORDER BY id ASC";
     $statement3 = $connect->prepare($query3);
     $statement3->execute();
     $result3 = $statement3->fetchAll();
     foreach($result3 as $row3)
     {
      $output3 .= '<option value="'.$row3["gst"].'">'.$row3["gst"].'</option>';
     }
     return $output3;
    }    
    ?>
    <!DOCTYPE html>
    <html>
     <head>
      <title>Add Remove Select Box Fields Dynamically using jQuery Ajax in PHP</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <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.7/js/bootstrap.min.js"></script>
     </head>   
     <body>
      <br />
      <div class="container">

       <h4 align="center">Enter Item Details</h4>
       <br />
       <form method="POST" id="insert_form">       
        <div class="table-repsonsive">
         <span id="error"></span> 
         <table class="table table-bordered" id="item_table">
          <tr>
           <th width="13%">Enter Item Name</th>
            <th width="15%">Select mode</th>
           <th width="15%">Select Weight</th>
            <th width="13%">Select Distance</th>
            <th width="10%"> Tax</th>

           <th width="5%">Enter Quantity</th>
          <th width="10%">Price</th>
           <th width="10%">Tax Amount</th>
            <th width="15%">Total price</th>
           <th width="5%" ><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>

          </tr>
         </table>

          <tr>
                    <td align="right"><b>Total</td>
                    <td align="right"><b><span id="final_total_amt"></span></b></td>
                  </tr>        
         <div align="center">
          <input type="submit" name="submit" class="btn btn-info" value="Insert" />
         </div>
        </div>
       </form>
      </div>
     </body>
    </html>

    <script>
    $(document).ready(function(){

      var final_total_amt = $('#final_total_amt').text();
            var count = 1;

     $(document).on('click', '.add', function(){
      var html = '';
      html += '<tr>';
      html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>';          
       html += '<td><select name="item_mode[]" id="item_mode'+count+'" class="form-control item_mode"><option value="">Select Mode</option><?php echo fill_mode_select_box($connect); ?></select></td>';

       html += '<td><select name="item_weight[]" id="item_weight'+count+'" class="form-control item_weight"><option value="">Select Weight</option><?php echo fill_weight_select_box($connect); ?></select></td>';

       html += '<td><select name="item_distance[]" id="item_distance'+count+'" class="form-control item_distance"><option value="">Select Distance</option><?php echo fill_distance_select_box($connect); ?></select></td>';

        html += '<td><select name="item_tax[]" id="item_tax'+count+'" class="form-control item_unit"><option value=""> Tax</option><?php echo fill_tax_select_box($connect); ?></select></td>';    

       html += '<td><input type="number" name="item_quantity[]" id="item_quantity'+count+'" class="form-control form-control-sm col-5 item_quantity" /></td>';   

        html+='<td><input type="text" name="price[]" id="price'+count+'" data-srno="'+count+'" class="form-control  order_item_actual_amount" readonly /></td>';

        html+='<td><input type="text" name="tax_amount[]" id="tax_amount'+count+'" data-srno="'+count+'"  class="form-control  order_item_actual_amount" readonly /></td>';

        html+='<td><input type="text" name="total_amount[]" id="total_amount'+count+'" data-srno="'+count+'" class="form-control  order_item_actual_amount" readonly /></td>';

    html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';

      $('#item_table').append(html);
     });

     $(document).on('click', '.remove', function(){
      $(this).closest('tr').remove();
     });

     $('#insert_form').on('submit', function(event){
      event.preventDefault();
      var error = '';

    function cal_final_total(count)
            {
              var final_item_total = 0;
              for(j=1; j<=count; j++)
              {
                var mode = 0;
                var weight = 0;
                var distance = 0;
                var tax = 0;
                var quantity = 0;
                var price1 = 0;
                var price = 0;
                var tax_amount= 0;
                var total_amount = 0;
                var item_total = 0;

                mode = $('#item_mode'+j).val();
                if(mode > 0)
                {
                  weight = $('#item_weight'+j).val();
                  if(weight > 0)
                  {
                    distance = $('#item_distance'+j).val();
                  if(distance > 0)
                  {

                    price1 = parseFloat(mode) + parseFloat(weight) + parseFloat(distance);

                    quantity = $('#item_quantity'+j).val();
                    if(quantity > 0)
                    {
                      price = parseFloat(price1)*parseFloat(quantity);
                      $('#price'+j).val(price);
                    }
                    tax = $('#item_tax'+j).val();
                    if(tax > 0)
                    {
                      tax_amount = parseFloat(price)*parseFloat(tax)/100;
                      $('#tax_amount'+j).val(tax_amount);
                    }


                    final_item_total = parseFloat(price) + parseFloat(tax_amount);
                    $('#total_amount'+j).val(final_item_total);
                  }
                }
              }

              }
              $('#final_total_amount').text(final_item_total);
            }

            $(document).on('blur', '.price', function(){
              cal_final_total(count);
            });

            $(document).on('blur', '.tax_amount', function(){
              cal_final_total(count);
            });

            $(document).on('blur', '.total_amount', function(){
              cal_final_total(count);
            });

   var form_data = $(this).serialize();
      if(error == '')
      {
       $.ajax({
        url:"insert.php",
        method:"POST",
        data:form_data,
        success:function(data)
        {
         if(data == 'ok')
         {
          $('#item_table').find("tr:gt(0)").remove();
          $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
          window.location = "index.php";
         }
        }
       });
      }
      else
      {
       $('#error').html('<div class="alert alert-danger">'+error+'</div>');
      }
     });

    });
    </script>

0 个答案:

没有答案