我正在使用Google Maps API构建价格/距离计算器，并尝试将计算器中的信息传递到单独页面上的预订表单。
我的第一个表单有2个提交按钮 - 一个用于计算，另一个用于将相关数据提交到预订表单。我一直试图让第二个按钮工作。
完成API计算后，我得到4个值 - From，To，Cost，Distance。我试图通过单击第二个按钮将From，To和Cost值传递到我的预订表单中。但我似乎无法让它发挥作用。我已经尝试过POST和GET，但我想我可能一直在做错了。任何帮助表示赞赏。
API表格代码：
<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';
});
}
// start of possible values for address not recognized on google search
// values for address1
function showLocation() {
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>
<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>
预订表格代码：
<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 their booking</small>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</p>
</form>
提前致谢
答案 0 :(得分：2)
为每个要传递的数量添加隐藏字段，并在使用
提交表单之前写入其值document.getElementById('hidden_field_id').value = calculated_value
答案 1 :(得分：1)
你可以使用
<form onSubmit="return false;" action="booking_form.php" id="booking_form">
然后提交：
<input type="submit" value="Get Quote" onclick="return showLocation();">
<input type="button" value="Reset" onClick="resetpage()">
<input type="submit" id="CBSubmit" value="Confirm and Book" onclick="this.form.submit();">
简单而有效