how to add a variable to field in a form

falent

06-24-2012, 06:38 PM

How should I add a variable "distance" to a filed "odleglosc" in a form ? I tried document.getElementById("distance").value = results[0].distance.text; but without success :(

http://celero.pl/Atol/inny.php

<html>
<head>
<LINK rel="stylesheet" HREF="style1.css" TYPE="text/css">
<title>Google Maps Distance Matrix | http://sharp-coders.blogspot.com</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body {
margin: 20px;
font-family: courier, sans-serif;
font-size: 12px;
}
#map {
height: 480px;
width: 640px;
border: solid thin #333;
margin-top: 20px;
}
</style>
<script type="text/javascript">
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];

//var origin2 = new google.maps.LatLng(32.5, 72.5);
var origin1 = document.getElementById("origins").value;
var destinationA = document.getElementById("destinations").value;
//var destinationB = new google.maps.LatLng(32.5, 72.5);
var destinationIcon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000";
var originIcon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000";
function initialize() {
var opts = {
center: new google.maps.LatLng(52.406451,16.917958),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), opts);
geocoder = new google.maps.Geocoder();
}

function calculateDistances() {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [document.getElementById("origins").value],
destinations: [document.getElementById("destinations").value],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
// visit http://code.google.com/apis/maps/documentation/javascript/tutorial.html for more configuration options
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '';
deleteOverlays();
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
outputDiv.innerHTML += results[j].distance.text +"<br />";

}
document.getElementById("distance").value = results[0].distance.text;
}
}
}
function addMarker(location, isDestination) {
var icon;
if (isDestination) {
icon = destinationIcon;
} else {
icon = originIcon;
}
geocoder.geocode({'address': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
});
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: "
+ status);
}
});
}

function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body onload="initialize()">
<textarea id="origins" class="database">Aleja Niepodleglosci, Poznan</textarea><br />
Destinations:<br />
<textarea id="destinations"></textarea><br />
<p><button type="button" onclick="calculateDistances();">Oblicz odleglosc</button></p>

<br/>
Odleglosc:
<input type="text" id="distance"/>

<div id="outputDiv"></div>
<div id="map"></div>
</body>

</html>

EpicWebDesign

06-24-2012, 10:03 PM

I assume you are referring to this portion of the code:

<p><button type="button" onclick="calculateDistances();">Oblicz odleglosc</button></p>
<br/>

Odleglosc:
<input type="text" id="distance"/>

Are you saying that eventually the text box "distance" will already be prefilled with other info, and you just want to append the value of new calculation that is called with onclick="calculateDistances();" to the end of the existing text? Or am I missing what you are asking.

falent

06-25-2012, 11:45 AM

I have to send information about distance to a form (field odleglosc). It doesn't work what I have done:

Odleglosc:
<input type="text" id="distance"/>

The variable "distance" should be displayed in a field Odleglosc in a form.

EpicWebDesign

06-25-2012, 03:37 PM

Just change this part of your code:

outputDiv.innerHTML += results[j].distance.text +"<br />";
}
document.getElementById("distance").value = results[0].distance.text;

to this instead:

// outputDiv.innerHTML += results[j].distance.text +"<br />";
document.getElementById("distance").value = results[j].distance.text;
}

Note: I just commented out that one line in case you still planned to use it elsewhere.

falent

06-25-2012, 04:03 PM

I'm sorry but it doesn't work :(

I have made a photo with place where I would like to display a "distance" variable

http://i46.tinypic.com/34edqhx.jpg

Here is a website with this script

http://formularz.fo.funpic.de/inny.php

EpicWebDesign

06-26-2012, 01:39 PM

It does work, you just forgot to move the line up above the "}" which closed the call function :) I copied your entire source code and just moved that one line and it functions exactly how you want it to

Here's how that portion of the code should look:

var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '';
deleteOverlays();
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
// outputDiv.innerHTML += results[j].distance.text +"<br />";
document.getElementById("distance").value = results[j].distance.text;
}

You can see a working version (on my server) here: http://epicwebdesignsolutions.com/clients/test-area/distance_calc.php