Question

我在我的代码中使用了post，主要用于在一个页面上从用户获取源和目标，然后将其传递到另一个php页面。我已经在表格中使用了帖子。我在下一个php文件中有预期的变量。我的问题是如何将此变量传递给html中定义的函数，以便源和目标是参数，函数会对此值进行调整。

提前致谢。我是这个论坛的新手。很抱歉这种问题格式。代码1：

<!DOCTYPE html>
<html>
<body>

<h2 style="text-align:center">Enter all the details for the search</h2>

<form action="sample4.php" method="post">
<fieldset>
<legend>Basic Information</legend>
  From  :  
  <input list="from" required="required" name="from" placeholder="From">
    <datalist id="from">
        <option value="Anand Vihar Railway Station">
        <option value="Railway Station Paharganj gate(NDLS)">
        <option value="India Gate">
        <option value="IIT Delhi Main Gate">
    </datalist>


  To :
  <input list="to" name="to" required="required" placeholder="To">
    <datalist id="to">
        <option value="Post Office">
        <option value="Kendriya Vidyalaya">
        <option value="Nalanda Apartments">
        <option value="Gupta Stores">
        <option value="Vaishali Apartments">
        <option value="Juice Center">
        <option value="Play Ground">
        <option value="Rajadhani Chatkare Foods">
        <option value="Baqsa">
        <option value="Student Activity Centre">
        <option value="IITD Hospital">
    </datalist>

  <br><br>



  Vehicle:
  <input list="vehicle" name="vehicle" required="required" placeholder="Vehicle">
    <datalist id="vehicle">
    <option value="Walk">
    <option value="Two-Wheeler">
    <option value="Public Four-Wheeler">
    <option value="Private Four-Wheeler">
</datalist>

  Day:<input list="days" name="days" required="required" placeholder="Type of Day">
    <datalist id="days">
    <option value="Working Day">
    <option value="Non-Working Day">
    </datalist>
  <br><br>
  Enter Hour:
  <input type="text" name="hour" required="required" placeholder="Range from 1 to 12">


  <input type="radio" name="am_pm" value="am" checked> AM
  <input type="radio" name="am_pm" value="pm"> PM<br><br>

  <input type="submit" value="Search">
  </fieldset>

</form> 

<div id="map" style="width:100%;height:350px;"></div>


<script>
function myMap() {
  var mapCanvas = document.getElementById("map");
    var maingate=new google.maps.LatLng(28.545793779055302,77.19646453857422);
  var mapOptions = {center: maingate, zoom: 15};
  var map = new google.maps.Map(mapCanvas,mapOptions);
  var marker = new google.maps.Marker({position:maingate});
  marker.setMap(map);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnrInD2NPJG60PcUIEXU6dJ-mck04mpQI&callback=myMap"></script>

</body>
</html>

代码2：

<!DOCTYPE html>
<html>
  <body>
    <meta charset="UTF-8" />
    <script src="http://maps.google.com/maps/api/js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <div id="map" border></div>
    <?php
        $from=$_POST['from'];
        $to=$_POST['to'];
        echo $from;
        echo $to;
    ?>
    <script>
      function calculateRoute(from, to) {
        // Center initialized to Naples, Italy
        var myOptions = {
          zoom: 10,
          center: new google.maps.LatLng(42.633, -71.317),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

        var directionsService = new google.maps.DirectionsService();
        var directionsRequest = {
          origin: from,
          destination: to,
          travelMode: google.maps.DirectionsTravelMode.DRIVING,
          unitSystem: google.maps.UnitSystem.METRIC
        };
        directionsService.route(
          directionsRequest,
          function(response, status)
          {
            if (status == google.maps.DirectionsStatus.OK)
            {
              new google.maps.DirectionsRenderer({
                map: mapObject,
                directions: response
              });
            }
            else
              $("#error").append("Unable to retrieve your route<br />");
          }
        );
      }

      $(document).ready(function() {
        // If the browser supports the Geolocation API
        if (typeof navigator.geolocation == "undefined") {
          $("#error").text("Your browser doesn't support the Geolocation API");
          return;
        }

        $("#from-link, #to-link").click(function(event) {
          event.preventDefault();
          var addressId = this.id.substring(0, this.id.indexOf("-"));

          navigator.geolocation.getCurrentPosition(function(position) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
              "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
            },
            function(results, status) {
              if (status == google.maps.GeocoderStatus.OK)
                $("#" + addressId).val(results[0].formatted_address);
              else
                $("#error").append("Unable to retrieve your address<br />");
            });
          },
          function(positionError){
            $("#error").append("Error: " + positionError.message + "<br />");
          },
          {
            enableHighAccuracy: true,
            timeout: 10 * 1000 // 10 seconds
          });
        });

        $("#calculate-route").submit(function(event) {
          event.preventDefault();
          calculateRoute($("#from").val(), $("#to").val());
        });
      });
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnrInD2NPJG60PcUIEXU6dJ-mck04mpQI&callback=myMap"></script>
    <style type="text/css">
      #map {
        width: 500px;
        height: 400px;
        margin-top: 10px;
      }
    </style>

  </body>
</html>

现在必须为code1中的from和to的所选输出提供计算功能的输入。两者都是.php文件。

Answer 1

在Code 2文件中，您可以获得$＆amp; $ to，现在将脚本函数更改为

$("#calculate-route").submit(function(event) {
    event.preventDefault();
    calculateRoute("<?php echo $from; ?>", "<?php echo $to; ?>");
});

你很高兴。

Answer 2

尝试这个

在你的code 2文件php变量中直接在javascript中没有用，所以你需要使用以下结构来使用php变量

calculateRoute(<?php echo json_encode($from); ?>, <?php echo json_encode($to); ?>)

我认为这很有帮助

使用php和html anf将变量传递给函数

2 个答案: