如何在单击“提交”按钮之前从数据库获取值并显示计算出的值

时间:2019-04-17 04:40:52

标签: javascript php html css

分支(数据库) 源目的地距离 孟加拉金奈500

    <?php
    $db=mysqli_connect("localhost","root","","courier");
    if (isset($_POST['weight'])) {
    $sour=$_POST['source'];
    $dest=$_POST['dest'];
    $weight=$_POST['weight'];
    $sql="SELECT distance FROM branch WHERE source='$sour' AND destination='$dest'";
    $result=mysqli_query($db,$sql);
    $row=mysqli_fetch_array($result);
    $amt=$row['distance']*$weight*10;
    echo $amt;
    }
    ?>
 <!DOCTYPE html>
        <html lang="en">
        <head>
          <title>BOOKING</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" 

 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
          <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
          <style>
        <div class="form-group">
          <label for="source">SOURCE</label>
          <select class="form-control" name="source" id="src">
            <option>SELECT</option>
            <option>BANGALORE</option>
            <option>CHENNAI</option>
            <option>BOMBAY</option>
            <option>KOLKATA</option>
            <option>HYDERABAD</option>
            <option>THIRUVANANTHAPURAM</option>
          </select>
        </div>
     <div class="form-group">
          <label for="dest">DESTINATION</label>
          <select class="form-control" name="dest" id="dst">
            <option>SELECT</option>
            <option>BANGALORE</option>
            <option>CHENNAI</option>
            <option>BOMBAY</option>
            <option>KOLKATA</option>
            <option>HYDERABAD</option>
            <option>THIRUVANANTHAPURAM</option>
          </select>
        </div>
          <div class="form-group">
          <label for="weight">WEIGHT(in kgs):</label>
          <input type="textarea" class="form-control" id="weight " placeholder="Enter Weight" name="weight">
        </div>
          <div class="form-group">
          <label for="stadd">AMOUNT:</label>
          <input type="text" class="form-control"  name="amt" id="amt">
        </div>
        <button type="submit" class="btn btn-success" >Submit</button>
      </form>
  <script type="text/javascript">
    $(document).on('change','#dst',function(){
        var source=$('#src').val();
        var destination=$('#dst').val(); 
        var weight=$('#weight').val();
        $.ajax({
          method:"post",
          url:"amount.php",
          data:{source:'source',dest:'destination',weight:weight}

        })
        .done(function(data){
          $("#amt").val(data);
        });

    });

  </script>

我需要从分支说的距离中检索值,然后计算等于权重*距离* 10的量 我尝试这样做,但未在金额字段中显示值 我曾尝试为此使用ajax,php和jquery,但是我是新手,所以我无法弄清楚代码出了什么问题

1 个答案:

答案 0 :(得分:1)

在变更目的地,您可以发送ajax请求来计算值。

$(document).on('change', '.destination', function(){

    $.get('/url', function(res)
    {
       console.log(res);
    });
    });

在res中,您可以获得价值。