I am building a price/distance calculator with Google Maps API and am trying to pass the info from the calculator to a booking form on a separate page.
My first form has 2 submit buttons - one to make the calculation, and one to submit the relevant data to the booking form. I'
m stuck trying to make the 2nd button work.
Once the API calculation has been made, I get 4 values - From, To, Cost, Distance. I am trying to pass the From, To and Cost values into my booking form by clicking the second button. But I can;t seem to get it to work. I've tried POST and GET but I think I may have been doing something wrong with both. Any help is appreciated.
Code for API form:
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAwCUxKrPl8_9WadET5dc4KxTqOwVK5HCwTKtW27PjzpqojXnJORQ2kUsdCksByD4hzcGXiOxvn6C4cw&sensor=true"></script>
<script type="text/javascript">
var geocoder = null;
var location1 = null;
var location2 = null;
var gDir = null;
var directions = null;
var total = 0;
function roundNumber(num, dec) {
var result = Math.floor(num*Math.pow(10 ,dec))/Math.pow(10,dec);
return result;
}
function from(form) {
address1=form.start.options[form.start.selectedIndex].value
form.address1.value=address1
form.address1.focus()
}
function to(form) {
address2=form.end.options[form.end.selectedIndex].value
form.address2.value=address2
form.address2.focus()
}
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(54.019066,-1.381531),9);
map.setMapType(G_NORMAL_MAP);
geocoder = new GClientGeocoder();
gDir = new GDirections(map);
GEvent.addListener(gDir, "load", function() {
var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
var miles = drivingDistanceMiles.toFixed(0);
//var cost = (((miles - 1) * 1.9) + 3.6).toFixed(2);
var meters = gDir.getDistance().meters.toFixed(1);
if(miles < 70){
var cost = miles *1.75;
}
if(miles >70){
var cost = miles *1.2;
}
document.getElementById('from').innerHTML = '<strong>From: </strong>' + location1.address;
document.getElementById('to').innerHTML = '<strong>To: </strong>' + location2.address;
document.getElementById('cost').innerHTML = '<span class="fare"><strong>Estimated Taxi FARE:</strong>' + ' £' + cost.toFixed(2) + '</span>';
document.getElementById('miles').innerHTML = '<strong>Distance: </strong>' + miles + ' Miles';
});
}
function showLocation()
// start of possible values for address not recognized on google search
// values for address1
{
if (document.forms[0].address1.value == "heathrow" || document.forms[0].address1.value == "Heathrow" || document.forms[0].address1.value == "heathrow airport" || document.forms[0].address1.value == "Heathrow Airport" || document.forms[0].address1.value == "London Heathrow" || document.forms[0].address1.value =="london heathrow" )
{
(document.forms[0].address1.value = "Heathrow Airport");
}
if (document.forms[0].address2.value == "heathrow" || document.forms[0].address2.value == "Heathrow" || document.forms[0].address2.value == "heathrow airport" || document.forms[0].address2.value == "Heathrow Airport" || document.forms[0].address2.value == "London Heathrow" || document.forms[0].address2.value =="london heathrow" )
{
(document.forms[0].address2.value = "Heathrow Airport");
}
geocoder.getLocations(document.forms[0].address1.value + document.forms[0].uk.value || document.forms[0].start.value + document.forms[0].uk.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to find the first address");
}
else
{
location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
geocoder.getLocations(document.forms[0].address2.value + document.forms[0].uk.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to find the second address");
}
else
{
location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
gDir.load('from: ' + location1.address + ' to: ' + location2.address);
}
});
}
});
}
</script>
<style>
#quote {
font-family: Georgia, "Times New Roman", Times, serif;
}
</style>
</head>
<body style="background-color: rgb(255, 255, 255);" onUnload="GUnload()" onLoad="initialize()">
<div id="sidebar">
<!--MAPS-->
<div id="calc_top"></div>
<div id="calc_body">
<div id="calc_inside">
<span style="font-size: 16px; font-weight: bold;">Get A Quote Now</span>
<p class="disclaimer">Fares can be calculated using either Area, Exact Address or Postcode, when entering address please
include both road name and area i.e. <em>Harrogate Road, Ripon</em>. You can also select a pickup point and destination from the dropdown boxes.
</p>
<form onSubmit="showLocation(); return false;" action="#" id="booking_form">
<p>
<select onChange="from(this.form)" name="start">
<option selected="selected">Select a Pickup Point</option>
<option value="Leeds Bradford Airport">Leeds Bradford Airport</option>
<option value="Manchester Airport">Manchester Airport</option>
<option value="Teesside International Airport">Teeside Airport</option>
<option value="Liverpool John Lennon Airport">Liverpool Airport</option>
<option value="East Midlands Airport">East Midlands Airport</option>
<option value="Heathrow International Airport">Heathrow Airport</option>
<option value="Gatwick Airport">Gatwick Airport</option>
<option value="Stanstead Airport">Stanstead Airport</option>
<option value="Luton International Airport">Luton Airport</option>
</select>
</p>
<p>
<input type="text" value="From" name="address1"><br>
<p>
<select onChange="to(this.form)" name="end">
<option selected="selected">Select a Destination</option>
<option value="Leeds Bradford Airport">Leeds Bradford Airport</option>
<option value="Manchester Airport">Manchester Airport</option>
<option value="Teesside International Airport">Teeside Airport</option>
<option value="Liverpool John Lennon Airport">Liverpool Airport</option>
<option value="East Midlands Airport">East Midlands Airport</option>
<option value="Heathrow International Airport">Heathrow Airport</option>
<option value="Gatwick Airport">Gatwick Airport</option>
<option value="Stanstead Airport">Stanstead Airport</option>
<option value="Luton International Airport">Luton Airport</option>
</select>
</p>
<input type="text" value="To" name="address2"><br>
<input type="hidden" value=" uk" name="uk">
<br>
<input type="submit" value="Get Quote">
<input type="button" value="Reset" onClick="resetpage()"><br /><br />
<input type="submit" id="CBSubmit" value="Confirm and Book" action=""/>
</p>
</form>
<p id="from"><strong>From:</strong></p>
<p id="to"><strong>To:</strong></p>
<p id="miles"><strong>Distance: </strong></p>
<p id="cost"><span class="fare"><strong>Estimated Taxi FARE:</strong></span></p>
<p id="results"></p>
<div class="style4" style="width: 500px; height: 500px; position: relative; background-color: rgb(229, 227, 223);" id="map_canvas"></div>
</div>
</div>
Code for Booking Form:
<form method="post" action="contactengine.php" id="contact_form">
<p>
<label for="Name" id="Name">Name:</label>
<input type="text" name="Name" />
<label for="Email" id="Email">Email:</label>
<input type="text" name="Email" />
<label for="tel" id="tel">Tel No:</label>
<input type="text" name="tel" /><br /><br />
<label for="from" id="from">Pickup Point:</label>
<input type="text" name="from" value="" /><br /><br />
<label for="to" id="to">Destination:</label>
<input type="text" name="to" value=""/><br />
<label for="passengers" id="passengers">No. of passengers</label>
<input type="text" name="passengers" /><br /><br />
<label for="quote" id="quote">Price of journey:</label>
<input type="text" name="quote" value="" /><br /><br />
<label for="Message" id="Message">Any other info:</label>
<textarea name="Message" rows="20" cols="40"></textarea>
<br />
Are you an account holder?<br />
<label for="account" id="yes" />
Yes:</label>
<input type="radio" class="radio" value="yes" name="account">
<label for="account" id="yes" />
No:</label>
<input type="radio" class="radio" value="no" name="account">
</p>
<small>Non-account holders will have to pay a £5 booking fee when confirming thier booking</small>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</p>
</form>
Thanks in advance
