如何在票价计算器中添加下拉列表

我试图建立一个拖车费用计算器，我在这里早些时候发现了一个脚本，我修改了它，它似乎是计算很好，但现在我需要添加一个下拉到它，并根据所选择的计算。

说得快一点，我需要知道我们拖的是什么，如果是汽车，费率是每英里1.10，如果是货车费率是每英里1.30等等…

我如何在下拉菜单中选择并计算车费?

我有一点php技能，所以欢迎任何评论。

<?php
session_start();
$rate = 1.10;
$fix = 75;
$callout = 65;
//}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Taxi Fare Calculation using PHP with GOOGLE MAPS API V3</title>
<style type="text/css">
html {
    height: 100%
}
body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family:tahoma;
    font-size:8pt;
}
#total {
    font-size:large;
    text-align:center;
    font-family:Georgia, “Times New Roman”, Times, serif;
    color:#990000;
    margin:5px 0 10px 0;
    font-size:12px;
    width:374px;
}
input {
    margin:5px 0px;
    font-family:tahoma;
    font-size:8pt;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
    //<![CDATA[
      var map = null;
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var Dublin = new google.maps.LatLng(53.349805,-6.260310);
        var mapOptions = {  
                    center              : Dublin,
                    zoom                : 4,
                    minZoom             : 3,
                    streetViewControl   : false,
                    mapTypeId           : google.maps.MapTypeId.ROADMAP,
                    zoomControlOptions  : {style:google.maps.ZoomControlStyle.MEDIUM}
                };

        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
         //Find From location    
    var fromText = document.getElementById('start');
    var fromAuto = new google.maps.places.Autocomplete(fromText);
    fromAuto.bindTo('bounds', map);
    //Find To location
    var toText = document.getElementById('end');
    var toAuto = new google.maps.places.Autocomplete(toText);
    toAuto.bindTo('bounds', map);
    //  
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));
        /*var control = document.getElementById('control');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP].push(control);*/
      }
      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            computeTotalDistance(response);
          }
        });
      }
      function computeTotalDistance(result) {
      var total = 0;
      var myroute = result.routes[0];
      for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
      }
      total = total / 1000;
      /*Start Calculating Distance Fair*/
          if (16>total){
          var cost = <?php echo $fix; ?>;
          }
          else if (17<total && 700>total)
            {
            var cost = ((total * <?php echo $rate; ?>) + (<?php echo $callout; ?>));
            }

          var fare = cost;
          var fare = Math.round(fare*100)/100;
      /*Distance Fair Calculation Ends*/
      document.getElementById("total").innerHTML = "Total Distance = " + total + " km and FARE = $" + fare;
      }
    function auto() {
    var input = document.getElementById[('start'), ('end')];
    var types
    var options = {
       types: [],
       componentRestrictions: {country: ["IE"]}
        };
        var autocomplete = new google.maps.places.Autocomplete(input, options);
     }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body onLoad="initialize()">
<table width="380px" border="2" cellpadding="0" cellspacing="0" bordercolor="#FF9F0F" style="border-collapse:collapse">
  <tr>
    <td bgcolor="#FFFF99" style="padding:5px;">
    <table width="375px" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><div id="map_canvas" style="width: 374px; height: 300px; border: solid 1px #336699"></div></td>
        </tr>
        <tr>
          <td><div id="form" style="width:374px; text-align:center; border: solid 1px #336699; background:#d1e1e4;">
              From:
                <input type="text" id="start" size="60px" name="start" placeholder="Enter Location From">
                <br />
                To:
                <input size="60px" type="text" id="end" name="end" placeholder="Enter Destination ">
                <input type="button" value="Calculate" onClick="calcRoute();">
             <div id="total"></div>
             </div></td>
        </tr>
      </table>
      </td>
  </tr>
</table>
</body>
</html>

谢谢

你可以从这个开始…

<form action="process.php" method='post'>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" />
</form>

然后在process.php中$_POST['cars']将等于提交的内容。然后添加另一个下拉列表，比如<select name="prices">，然后得到$_POST['prices']

相关内容

最新更新

热门标签：