Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    how to add a variable to field in a form

    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

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

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    I assume you are referring to this portion of the code:
    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.

  • Users who have thanked EpicWebDesign for this post:

    falent (06-25-2012)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have to send information about distance to a form (field odleglosc). It doesn't work what I have done:

    Code:
    Odleglosc:      
    <input type="text" id="distance"/>
    The variable "distance" should be displayed in a field Odleglosc in a form.

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Just change this part of your code:
    Code:
    outputDiv.innerHTML += results[j].distance.text +"<br />";
    }
    document.getElementById("distance").value = results[0].distance.text;
    to this instead:
    Code:
    // 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.

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm sorry but it doesn't work

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



    Here is a website with this script

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

  • #6
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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:
    Code:
         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/cl...tance_calc.php


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •