Welcome to WebmasterWorld Guest from 3.226.251.81

Forum Moderators: open

Message Too Old, No Replies

How can i add per minute, % to a fare estimator

     
12:35 am on May 14, 2016 (gmt 0)

New User

joined:May 14, 2016
posts: 2
votes: 0


Hello.

I have a Fare Estimator it works great but i been trying to figure out how can i add an additional feature like also charge per time, and also add % for Gratuity to charge at the end before total, I tried few ways but it did not function right i am not an expert, learning as i go, would appreciate if ya can help me out with this. I have all this set up in html.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fare Estimator</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
//--------------Settings--------------------------------
//ISO 3166-1 Alpha-2 country code, use http://en.wikipedia.org/wiki/ISO 3166-2_alpha-2#US
var countrycode="US"
//Rate per mil (2.00)
var ratepermi=2.00;
//Minimum fare (40)
var minimum_fare=40;
//Currrency Symbol
var currencysymbol="$";
//Avoid motorways / highways? true/false
var avoidHighways=false;
//Avoid toll roads? true/false
var avoidTolls=false;
//Show summary? true/false
var showsummary=true;
//Disclaimer text
var disclaimer="Please be aware this is only an estimated fare and the final price will be quoted on request"
//----------End Settings--------------------------------
function initialize()
{
var options = {componentRestrictions: {country: countrycode}};
var input = /** @type {HTMLInputElement} */(document.getElementById('inputfrom'));
var searchBoxfrom = new google.maps.places.Autocomplete(input,options);
var input = /** @type {HTMLInputElement} */(document.getElementById('inputto'));
var searchBoxto = new google.maps.places.Autocomplete(input,options);
}

function ftn_estimate()
{
if (document.getElementById('inputfrom').value!="" && document.getElementById('inputto').value!="")
{
var origin = document.getElementById('inputfrom').value;
var destination = document.getElementById('inputto').value;

var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: avoidHighways,
avoidTolls: avoidTolls,
}, callback);
}
}

function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;

for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;

for (var j = 0; j < results.length; j++) {

if(showsummary)
{
document.getElementById('summary').innerHTML=origins[i] + ' to ' + destinations[j] + ': ' + results[j].distance.text + ' in '+ results[j].duration.text;
document.getElementById('summary').innerHTML+="<br /><font color='red'>" + disclaimer + "</font>"
}
document.getElementById('distance').value=(results[j].distance.value/1609.34).toFixed(1);
document.getElementById('time').value=(results[j].duration.value/60).toFixed(1);

var calc_fare=(results[j].distance.value/1609.34)*ratepermi;

if (calc_fare<minimum_fare)
{
calc_fare=minimum_fare;
}
document.getElementById('fare').value=currencysymbol+calc_fare.toFixed(2);
}
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<head>
<body>
<div style="border-style: solid; border-width: 0px; width:236px; background-color: #; height: 326px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;" class="auto-style44">
<br>
<br>
<br><strong>
<input id="inputfrom" type="text" placeholder="From" style="width:237px" class="auto-style46"></strong>
<br/>to<br/>
<strong>
<input id="inputto" type="text" placeholder="To" style="width:237px" class="auto-style46"></strong><br>&nbsp;<br/>
<strong>
<input type="button" onclick="ftn_estimate();" value="ESTIMATE FARE" class="auto-style46" style="width: 237px" /></strong>
<br/><br><span class="auto-style47"><strong>Minimum Fare $55.00</strong></span><strong><br class="auto-style47">
</strong><span class="auto-style47"><strong>5% Gas Surcharges<br>15%
Gratuity<br></strong></span><br/>
<table>
<tr><td class="auto-style43" style="width: 126px"><strong>Time (mins)</strong></td><td>
<strong>
<input id="time" readonly type="text" placeholder="--" style="width:100px" class="auto-style46"></strong></td></tr>
<tr><td class="auto-style43" style="width: 126px"><strong>Distance (miles)</strong></td><td>
<strong>
<input id="distance" readonly type="text" placeholder="--" style="width:100px" class="auto-style46"></strong></td></tr>
<tr><td class="auto-style43" style="width: 126px"><strong>Estimated Fare</strong></td><td>
<strong>
<input id="fare" readonly type="text" placeholder="--" style="width:100px" class="auto-style46"></strong></td></tr>
</table>
<span id="summary"></span>
</div>
</body>
</head>
</body>
</html>
7:05 am on May 17, 2016 (gmt 0)

New User

joined:May 14, 2016
posts: 2
votes: 0


anyone?
2:54 pm on May 17, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4391
votes: 310


First of all, welcome to the forums. The slow response might be due to posting the question in the HTML forum. The html can be fixed, but the script is not html, the script is javascript. It can be hard to get someone who might help with javascript to see the question here in the html forum.

This html has multiple closing tags and duplicate element tags that would hurt efforts to fix the javascript used for the Estimator.

Notice just the last 4 tags for example:
</body>
</head>
</body>
</html>

Makes it look like things were just pasted randomly into a page. The </head> tag needs to be only before the <body> tag and once the </body> tag is closed there can't be another </head> tag nor a second </body> tag. The script is after the </head> tag is closed, but then there is a second <head> tag that contains the <body> here:
</script>
<head>
<body>

and that is after closing the <head> tag up at the top of the page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>


I would start with a basic skeleton of a page and work from there:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>(title)</title>
(script goes here)
</head>
<body>
(form and the rest of the page goes here)
</body>
</html>


Then you might be able to work on the javascript - I would take that question to the Javascript forum here: [webmasterworld.com...]