0

ユーザーが開始場所と終了場所を入力できるページを作成し、距離を出力します(これはGoogle APIを使用しています)。これにはいくつかのインスタンスがあるため、ユーザーが完了すると、いくつかの開始場所、終了場所、および場所間の距離が効果的に表示されます。PHPを使用してデータベースにリンクされた単一の送信フォームに各「旅」をリンクする必要がありますが、これをすべてフォームに入れると、ユーザーが旅を入力するたびにページが更新されるため、機能しなくなります。これを回避できる唯一の方法は、各行を独自のフォームに配置し、すべてのフォームを 1 つの送信ボタンにリンクすることです。この問題を回避するにはどうすればよいですか、またはデータベースに接続する最良の方法は何ですか? これを十分に説明していない場合は申し訳ありません。私の行の 1 つのコードを以下に示します。

<form>

<tr height="60">
<td>Date</td>
<td>Job</td>
<td>Start Location</td>
<td>End Location</td>
<td>Confirm Route</td>
<td>Distance</td>
</tr>


<body onload="initialize(); initialize1(); initialize2(); initialize3(); initialize4(); initialize5(); initialize6(); initialize7(); initialize8(); initialize9(); initialize10(); ">


<script type="text/javascript">
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var belfast = new google.maps.LatLng(55, -5)
        var myOptions = {
            zoom:5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: belfast,
        }

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);
    }

    function calcRoute() {
        var start = document.getElementById("pc1").value;
        var end = document.getElementById("pc2").value;

        var distanceInput = document.getElementById("distance");
        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);
                distanceInput.value = Math.round(response.routes[0].legs[0].distance.value / 1000);
                updateTotalDistance();                  
            }
        });
    }
</script>


<tr height="38">
<td><input valign="top" type="text" name="date" id="datepicker" style="width:75px"/></td>
<td><textarea valign="top" name="job" cols="10" rows="1"></textarea></td>
<td><select id="pc1">
<option>Antrim Area Hospital</option>
<option>Causeway hospital</option>
<option>Braid Valley Hospital</option>

</select>
</td>
<td><select id="pc2">
<option>Antrim Area Hospital</option>
<option>Causeway hospital</option>
<option>Braid Valley Hospital</option>

</select></td>
<td><input type="submit" value="OK" name="submit" id="submit1" onclick="calcRoute()"></td>
<td><input type="text" class="distance" id="distance" readonly="true" onkeyup="return   autocalc(this,t2,t3)" tabindex="1" style="width:45px"></td>


</form>
4

1 に答える 1

0

これを解決する最良の方法は、PHPでAJAX技術を使用することです。

于 2012-04-10T15:59:59.343 に答える