I am trying to create a website where a user can enter a start location and an end location into textbox's and the distance between the two location shall be output into another textbox (This is done using a google API). On my webpage I have set up several instances of this therefore after the user has input their start and end locations, there are a number of 'distances' displayed. I have been able to do this successfuly. What I now need is to be able to add up all the distances into one total and I am unsure how to do this. I have found a small autocalculate script that seems to be what I need however I am unsure as how to incorperate it into my current code (I shall post this code below). My knowledge of javascript is very poor so any help or advise is appreciated. I'm not sure if it makes a difference or not but I also intend to input all the data inserted on this page into a database using PHP.
my working code:
<body onload="initialize(); initialize1(); initialize2(); initialize3()">
</head>
<table width="800" align="center">
<tr height="90">
<td width="100">Start Location</td>
<td width="100">End Location</td>
<td width="100">Confirm Route</td>
<td width="100">Distance</td>
</tr>
<tr>
<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,
<!-- destination:middle,destination:end, -->
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
}
});
}
</script>
<td><input type="text" id="pc1" /></td>
<td><input type="text" id="pc2" /></td>
<td><input type="submit" value="OK" name="submit" id="submit1" onclick="calcRoute()"></td>
<td><input type="text" name="distance" id="distance" readonly="true"></td>
</tr>
<td><input type="text" id="pc3" /></td>
<td><input type="text" id="pc4" /></td>
<td><input type="submit" value="OK" name="submit" id="submit2" onclick="calcRoute1()"></td>
<td><input type="text" name="distance1" id="distance1" readonly="true"/></td>
</tr>
<td><input type="text" id="pc5" /></td>
<td><input type="text" id="pc6" /></td>
<td><input type="submit" value="OK" name="submit" id="submit3" onclick="calcRoute2()"></td>
<td><input type="text" name="distance2" id="distance2" readonly="true"/></td>
</tr>
</table>
the auto calculate function that I would like to incorperate:
<head>
<script type="text/javascript" language="javascript">
function autocalc(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, total = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
total += val; //accumulate
}
}
oForm.total.value = total; //out
}
</script>
</head>
<body onload="document.forms[0].reset()">
<form style="width:260px;margin:100px auto;border:2px black dashed;">
<table cellspacing="8">
<tr>
<!-- pass field reference ('this') and other field references -->
<td>Distance 1___<input name="t1" type="text" onkeyup="return autocalc(this,t2,t3)" tabindex="1"></td>
</tr><tr>
<td>Distance 2___<input name="t2" type="text" onkeyup="return autocalc(this,t1,t3)" tabindex="2"></td>
</tr><tr>
<td>Distance 3___<input name="t3" type="text" onkeyup="return autocalc(this,t1,t2)" tabindex="3"></td>
</tr>
<tr>
<td rowspan="3"><strong>total Distance_____</strong><input name="total" type="text" readonly="readonly" value="0" tabindex="-1"></td>
</tr>
</table>
</form>