Question

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&amp;v=2&amp;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>

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 their booking</small>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</p>

</form>

Thanks in advance

Answer 1

you could use

<form onSubmit="return false;" action="booking_form.php" id="booking_form">

then submits:

<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();">

it’s simple and efficient