Transmettre des données d'un formulaire à un autre sur une page séparée

Question

Je suis en train de créer une calculatrice de prix/distance avec l'API Google Maps et j'essaie de transmettre les informations de la calculatrice à un formulaire de réservation sur une page séparée.

Mon premier formulaire a 2 boutons d'envoi - un pour faire le calcul, et un pour soumettre les données pertinentes au formulaire de réservation. Je suis coincé en essayant de faire fonctionner le 2ème bouton. Une fois le calcul de l'API effectué, j'obtiens 4 valeurs: De, À, Coût, Distance. J'essaie de transmettre les valeurs De, À et Coût dans mon formulaire de réservation en cliquant sur le deuxième bouton. Mais je n'arrive pas à le faire fonctionner. J'ai essayé POST et GET mais je pense que j'ai pu faire quelque chose de mal avec les deux. Toute aide est appréciée.

Code pour la forme API:

<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 pour le formulaire de réservation:

<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> 

Merci à l'avance

Answer 1

vous pouvez utiliser

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

soumet ensuite:

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

il est simple et efficace

Answer 2

Ajouter des champs cachés pour chacune des quantités que vous souhaitez transmettre et d'écrire leur valeur avant de soumettre le formulaire avec

document.getElementById('hidden_field_id').value = calculated_value