Hello everybody🙂
I am really new with Chronoforms, have been trying it for about two days and i really think that this is a great product.
I am not a programmer, just an experienced joomla user, so i need your help for a project.
Firstly, i will need your opinion if the functionality which i am looking is possible to be done with CF.
Shortly, i will need the visitor to fill up two fields - addres1 and addres2 and to receive the calculated distance and fare, depend of the type of the vehicle used - i have the javascript code to do this - working in a html file.
After this, i will need the calculated amount to be used for further registration and submition for paypal payment. This will be the step two - after the visitor's decision about the price.
I am not sure how it is right to start. I did some tests, but it seems that the Javascript is not working - when i check the source code i can see the javascript between //<![CDATA[ ... //]]>
kind of brackets. Is this ok? here is the code of the html page - it is working in separate file, but not in form made with chronoforms:
here is the link to the html file: http://lowcostchauffeurs.co.uk/location3.html
I am putting the Javascript code in the Javascript place, and the HTML code (fields and buttons) in the HTML place.
Any suggestions?
I am really new with Chronoforms, have been trying it for about two days and i really think that this is a great product.
I am not a programmer, just an experienced joomla user, so i need your help for a project.
Firstly, i will need your opinion if the functionality which i am looking is possible to be done with CF.
Shortly, i will need the visitor to fill up two fields - addres1 and addres2 and to receive the calculated distance and fare, depend of the type of the vehicle used - i have the javascript code to do this - working in a html file.
After this, i will need the calculated amount to be used for further registration and submition for paypal payment. This will be the step two - after the visitor's decision about the price.
I am not sure how it is right to start. I did some tests, but it seems that the Javascript is not working - when i check the source code i can see the javascript between //<![CDATA[ ... //]]>
kind of brackets. Is this ok? here is the code of the html page - it is working in separate file, but not in form made with chronoforms:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex,follow" />
<title>Calculate driving distance with Google Maps API</title>
<script src="http://maps.google.co.uk/maps?file=api&v=2&key=ABQIAAAAgwXiNIXsh96zB88S-nMOzRTmj1EmCEZzpGA4G73M0I92jSck_BQe1GaXZDi5gF4jyVcgQnZgMarfXw" type="text/javascript"></script>
<!-- According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API. see: http://code.google.com/apis/maps/terms.html -->
<script type="text/javascript">
var geocoder, location1, location2, gDir;
function initialize() {
geocoder = new GClientGeocoder();
gDir = new GDirections();
GEvent.addListener(gDir, "load", function() {
var drivingDistanceMiles = (gDir.getDistance().meters / 1609.344).toFixed(1);//for 1 decimal place
var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
//var duration = alert(response.routes[0].legs[0].duration.text);
var car_fare=document.getElementById('car_fare').value;
var Fare = (drivingDistanceMiles*car_fare).toFixed(1);
document.getElementById('fare').value=Fare;
//var directionsService = new google.maps.DirectionsService();
var car_fare=document.getElementById('distance').value=drivingDistanceMiles;
document.getElementById('results').innerHTML = '<strong>Address 1: </strong>' + location1.address + ' (' + location1.lat + ':' + location1.lon + ')<br /><strong>Address 2: </strong>' + location2.address + ' (' + location2.lat + ':' + location2.lon + ')<br /><strong>Driving Distance: </strong>' + drivingDistanceMiles + ' miles (or ' + drivingDistanceKilometers + ' kilometers)<br /><strong>Price: </strong>' + Fare + 'pounds'
});
}
function showLocation() {
geocoder.getLocations(document.forms[0].address1.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode 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, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode 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>
</head>
<body onload="initialize()">
<form action="#" onsubmit="showLocation(); return false;">
<p>
<input type="text" name="address1" value="Address 1" />
<input type="text" name="address2" value="Address 2" />
<input type="hidden" name="car_fare" id="car_fare" value="1.5"/>
<input type="hidden" name="distance" id="distance" />
<input type="hidden" name="fare" id="fare" />
<input type="submit" value="Search" />
<br>
<input type="radio" name="car" value="1.5" id='vw' onclick="document.getElementById('car_fare').value=this.value;showLocation();" checked><label for="vw">VW Golf</label><br>
<input type="radio" name="car" value="1.7" id='bmw' onclick="document.getElementById('car_fare').value=this.value;showLocation(); "><label for="bmw"> BMW</label><br>
<input type="radio" name="car" value="1.9" id='audi' onclick="document.getElementById('car_fare').value=this.value;showLocation();"> <label for="audi">Audi</label><br>
<input type="radio" name="car" value="2.2" id='bentley' onclick="document.getElementById('car_fare').value=this.value;showLocation();"> <label for="bentley">Bentley</label>
</p>
</form>
<p id="results"></p>
</body>
</html>here is the link to the html file: http://lowcostchauffeurs.co.uk/location3.html
I am putting the Javascript code in the Javascript place, and the HTML code (fields and buttons) in the HTML place.
Any suggestions?
Hi vvelikov,
Yes, this is all possible with ChronoForms. It can get a bit complex managing the PayPal responses but otherwise should be straightforward.
It's also possible to have the Google Maps code run with ChronoForms.
Hard to say anything about the error without seeing the form in ChronoForms. What does your JavaScript debugger tell you?
Bob
Yes, this is all possible with ChronoForms. It can get a bit complex managing the PayPal responses but otherwise should be straightforward.
It's also possible to have the Google Maps code run with ChronoForms.
Hard to say anything about the error without seeing the form in ChronoForms. What does your JavaScript debugger tell you?
Bob
Thank you for the answer! here is the page with the code:
http://lowcostchauffeurs.co.uk/test.html
at the moment i just put a simple test test test message to appear when the page sent an email.
Originaly, i want the result to be shown to the visitor, not to send an email, but i don't know how to do it. So at the moment i am just trying to make it work.
this here is the form html:
and the Javascript here:
i know i am doing something wrong, help🙂
http://lowcostchauffeurs.co.uk/test.html
at the moment i just put a simple test test test message to appear when the page sent an email.
Originaly, i want the result to be shown to the visitor, not to send an email, but i don't know how to do it. So at the moment i am just trying to make it work.
this here is the form html:
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Address 1</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_0" name="address1" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Address 2</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_1" name="address2" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<input value="1.5" id="hidden_2" name="car_fare" type="hidden" />
<input value="" id="hidden_3" name="distance" type="hidden" />
<input value="" id="hidden_4" name="fare" type="hidden" />
<div class="form_item">
<div class="form_element cf_button">
<input value="Submit" name="button_5" type="submit" />
</div>
<div class="cfclear"> </div>
</div>
and the Javascript here:
window.addEvent('load', function() {
src="http://maps.google.co.uk/maps?file=api&v=2&key=ABQIAAAAgwXiNIXsh96zB88S-nMOzRTmj1EmCEZzpGA4G73M0I92jSck_BQe1GaXZDi5gF4jyVcgQnZgMarfXw"
var geocoder, location1, location2, gDir;
function initialize() {
geocoder = new GClientGeocoder();
gDir = new GDirections();
GEvent.addListener(gDir, "load", function() {
var drivingDistanceMiles = (gDir.getDistance().meters / 1609.344).toFixed(1);//for 1 decimal place
var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
//var duration = alert(response.routes[0].legs[0].duration.text);
var car_fare=document.getElementById('car_fare').value;
var Fare = (drivingDistanceMiles*car_fare).toFixed(1);
document.getElementById('fare').value=Fare;
//var directionsService = new google.maps.DirectionsService();
var car_fare=document.getElementById('distance').value=drivingDistanceMiles;
document.getElementById('results').innerHTML = '<strong>Address 1: </strong>' + location1.address + ' (' + location1.lat + ':' + location1.lon + ')<br /><strong>Address 2: </strong>' + location2.address + ' (' + location2.lat + ':' + location2.lon + ')<br /><strong>Driving Distance: </strong>' + drivingDistanceMiles + ' miles (or ' + drivingDistanceKilometers + ' kilometers)<br /><strong>Price: </strong>' + Fare + 'pounds'
});
}
function showLocation() {
geocoder.getLocations(document.forms[0].address1.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode 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, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode 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);
}
});
}
});
}
}); i know i am doing something wrong, help🙂
Hi vvelikov,
The form looks OK. Your JavaScript is there but there is nothing to trigger it. The previous version used attributes like
Bob
The form looks OK. Your JavaScript is there but there is nothing to trigger it. The previous version used attributes like
onclick="document.getElementById('car_fare').value=this.value;showLocation();"$('car_fare').addEvent('click', showLocation);Bob
This topic is locked and no more replies can be posted.
