Nita Nita - 17 days ago 7
Javascript Question

Pass JavaScript calculation to form hidden input and the POST it to another page

I have a problem with passing Javascript calculation (distance and travel time from google) to form as hidden input. Using onSubmit so i can use it on the next page). Specifilcy (mi and time_teken).
Displaying this values with inner html on the same page there is no problem at all. And all work just fine.
As you can see im also passing lon and lat values using similar script (which is not here to make a submited code shorter, Also Work with no problem. But for these valus i use on change method. I tried a lot of different methods but at this point im totaly lost.

I will appraciate some help.

Thank you very much in advance.

<script language="javascript" type="text/javascript">window.onload=function(){initialize(51.508515, -0.12548719999995228);}</script>

<input type="hidden" value="1.5" id="more_then" name="more_then"/>
<input type="hidden" value="0" id="less_then" />
<script language="javascript">
function get_distance(form){
from = form.postcode1.value;
to = form.postcode2.value;
calcRoute(from,to);

}
</script>

<form id="booking" name="booking" action="test5.php" method='post' onsubmit='get_distance(this.form);'>
<input type="text" name="postcode1" id="postcode1" class="input-postcode1" onChange="Geocode1()" placeholder='Postcode or Town' /></td>
<input type="text" name="postcode2" id="postcode2" class="input-postcode1" onChange="Geocode2()" placeholder='Postcode or Town'/></td>
<input name="lat1" type="hidden" id="lat1">
<input name="lon1" type="hidden" id="lon1">
<input name="lat2" type="hidden" id="lat2">
<input name="lon2" type="hidden" id="lon2">
<input name="distance2" type="hidden" id="distance2">
<input name="timetaken" type="hidden" id="timetaken">
<input type="hidden" value="7" name="map_zoom" id="map_zoom"/>
<input type="hidden" value="£" id="curr_format"/>
<input type='submit' name='submit' id='submit' value='Calculate' class='LMV-callback' >
</form>


<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize(lat,lng) {
directionsDisplay = new google.maps.DirectionsRenderer();
//var location = new google.maps.LatLng(9.93123, 76.26730);
var location = new google.maps.LatLng(lat, lng);
var zm = parseInt(document.getElementById('map_zoom').value);
var myOptions = {
zoom: zm,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);

}

function calcRoute(from,to){
var start = from;
var end = to;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC //IMPERIAL //METRIC
};
// function to round the decimal digits eg: round(123.456,2); gives 123.45
function round(number,X) {
X = (!X ? 2 : X);
return Math.round(number*Math.pow(10,X))/Math.pow(10,X);
}

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);

var distance = response.routes[0].legs[0].distance.text;
var time_taken = response.routes[0].legs[0].duration.text;
var calc_distance = response.routes[0].legs[0].distance.value;
var less_then = document.getElementById('less_then').value;
var more_then = document.getElementById('more_then').value;
var curr_format = document.getElementById('curr_format').value;

if (calc_distance <= 16510) {
var amount_to_pay = calc_distance * less_then;
}
else {
var amount_to_pay = (calc_distance-16510) * more_then;
}

function roundNumber(numbr,decimalPlaces)
{
var placeSetter = Math.pow(10, decimalPlaces);
numbr = Math.round(numbr * placeSetter) / placeSetter;
return numbr;
}
var mi = calc_distance / 1.609;
var mi = mi/1000;
var mi = roundNumber(mi, 2); //Sets value to 2 decimal places.

/// my problem might by here

document.getElementById("distance2").value = mi;
$("#distance2").val(mi);
document.getElementById("timetaken").value = time_taken;
$("#timetaken").val(time_taken);



var rounded_amount_to_pay = round(amount_to_pay/1000,2);

document.getElementById('distance').innerHTML = '<div class="distance-inner"><span>'+ "The distance between <em>"+from+"</em> and <em>"+to+"</em>: <strong> "+mi+ " mi</strong>\n\
<br/>\n\
Time take to travel: <strong>"+time_taken+"</strong><br/>\n\
</span></div>";

var steps = "<ul>";
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
steps += "<li>" + myRoute.steps[i].instructions + "</li>";
}
steps += "</ul>";
document.getElementById('steps').innerHTML = '<div class="steps-inner"><h2>Driving directions to '+response.routes[0].legs[0].end_address+'</h2>'+steps+'</div>';
}
else{
document.getElementById('distance').innerHTML = '<span class="gdc-error">Google Map could not be created for the entered parameters. Please be specific while providing the destination location.</span>';
}
});

}

//window.onload=function(){initialize();}// JavaScript Document

</script>

Answer
document.booking.elements['distance'].value = mi;
document.booking.elements['timetaken'].value = time_taken;
Comments