无法使用javascript在页面上使用表单
我创建了一个页面，允许用户输入起始位置和结束位置，并使用谷歌API输出距离。我有几个这样有效的例子，一旦用户完成，将有几个开始位置，结束位置和位置之间的距离。现在，我需要将每个“旅程”链接到一个单一的提交表单，该表单使用PHP链接到数据库。然而，当我将所有这些都放在一个表单中时，它会停止工作，因为每次用户输入旅程时，页面都会自动刷新。我能看到的唯一方法是将每一行放在自己的表单中，并以某种方式将所有表单链接到一个提交按钮？我如何解决这个问题，或者将它连接到数据库的最佳方式是什么？对不起，我解释得不够清楚。下面可以看到我的一行的代码无法使用javascript在页面上使用表单,javascript,html,forms,Javascript,Html,Forms,我创建了一个页面，允许用户输入起始位置和结束位置，并使用谷歌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>
解决这一问题的最佳方法是使用PHP。阅读有关JavaScript内部的内容并删除您的looooooong onload对不起，这是零碎粘贴的吗？标签不同步，例如vs，我根本看不到任何标签。你能帮我们清理一下吗？