2012-04-10 5 views
0

사용자가 시작 위치와 끝 위치를 입력하고 거리를 출력 할 수있는 페이지를 만들었습니다.이 페이지는 Google API를 사용하여 출력됩니다. 나는 일단 사용자가 완성되면 여러 시작 위치, 끝 위치 및 위치 사이의 거리가있을 것입니다. 이제 각각의 '여행'을 PHP를 사용하여 데이터베이스에 연결된 단일 제출 양식에 연결해야합니다. 그러나이 모든 것을 양식에 넣으면 사용자가 페이지를 새로 고치는 여행을 입력 할 때마다 작동하지 않습니다. 이 문제를 해결할 수있는 유일한 방법은 각 행을 자체 양식으로 만들고 모든 양식을 어떻게 하나의 제출 단추에 연결하는 것입니까? 이 문제를 어떻게 해결할 수 있습니까? 아니면 데이터베이스에 연결하는 가장 좋은 방법은 무엇입니까? 미안하지만 충분히 설명하지 못했다면. 내 행 중 하나에 대한 코드는 아래에서 볼 수 있습니다.자바 스크립트 페이지에서 양식을 사용할 수 없습니다.

<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> 
+0

JavaScript 내 [배열] (https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array)에 대해 읽고 looooooooong'onload'을 삭제하십시오. – ManseUK

+0

죄송합니다. 단편으로 붙여 넣으시겠습니까? 태그가 동기화되지 않습니다 (예 : '

'vs ''). ''태그가 전혀 표시되지 않습니다. 우리 한테 좀 깨끗해 주실 래요? –

답변

0

이 PHP와 AJAX techniques을 사용하는 것입니다 해결하는 가장 좋은 방법.

관련 문제