Passing javascript variable to form.
Results 1 to 6 of 6

Thread: Passing javascript variable to form.

  1. #1
    Closet Nice Guy schwim's Avatar
    Join Date
    Jun 2006
    Location
    State of confusion
    Posts
    706

    Passing javascript variable to form.

    Hi there everyone,

    I'm building a membermap system and have run into a bit of a hurdle. I've created a form for the user to submit their location and the page is converting the human readable location into a lat/long string. I need that lat/long value to submit in a form, but I don't know how to do this.

    Here's the page in question.

    Once you submit your address, it places a marker. I would like a second button beside the first to submit the location, but I don't know how to pass the javascript var into the html form.

    Any assistance in this matter would be greatly appreciated!
    Last edited by schwim; 11-22-2012 at 01:15 PM.
    Warning: If you are taking advice from me, then you are in really bad shape. Let's both hope for your code's sake that someone comes along and pulls us out of this fix that I've gotten us into.

  2. #2
    Senior Member
    Join Date
    Aug 2008
    Location
    London, UK
    Posts
    753
    Assign that value into a hidden input field on your form and submit it. Or, make an Ajax request posting that as part of the data you're sending.
    Ashley Sheridan
    www.ashleysheridan.co.uk

  3. #3
    Closet Nice Guy schwim's Avatar
    Join Date
    Jun 2006
    Location
    State of confusion
    Posts
    706
    Hi there Ashley and thanks very much for your help,

    Here's the javascript in the head:

    Code:
    <script type="text/javascript">
      //Declare the variable that will store the geocode object
      var geocoder;
      var map;
      function initialize() {
        //Set the geocoder variable equal to an instance of the google maps geocoder object as new google.maps.Geocoder()
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(42.095287, -79.3185139);
        var myOptions = {
          zoom: 2,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
      
      //Add a second function to your javascript code, call it codeAddress.  It will not have any values passed to it.
      function codeAddress() {
        //The first line of the function should use getElementById to get the address from the text box and place it
        //into a variable we'll call sAddress.
        var sAddress = document.getElementById("inputTextAddress").value;
        //Call the geocode method of the geocoder object, this will take two passed in parameters.  The first is 
        //the GeocoderRequest, this says what kind of request is being made and what the request value is.  
        //The second is the callback function that will be used to process the results.
        geocoder.geocode( { 'address': sAddress}, function(results, status) {
            //The callback function should first check the status value of the callback function.  Use an IF statement
            //to test the result, check to see if the status equal google.maps.GeocoderStatus.OK.  Also add an 
            //ELSE clause to the if statement as well.
            if (status == google.maps.GeocoderStatus.OK) {
                //If the status equals OK, call the setCenter method of the map object variable.  You will pass this
                //method the results first geometry location.
                map.setCenter(results[0].geometry.location);
                //Next use the same result geometry location to add a map marker to the map object variable.  Create a new
                //variable, we'll call it oMarker, it will be created as a new google.maps.Marker.  The new method take two
                //parmaters, the first is the map object that you're adding the marker to, and the second is the 
                //position to place the marker which is again the first results geometry location.
                var marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location
                });
            } else {
                //Finally we're going to add an alert message to the ELSE to let the user know that the Geocode didn't 
                //work like it should have.  You can use the status to give a bit more information rather than just saying 
                //that it didn't work.
                alert("Geocode was not successful for the following reason: " + status);
            }
          });
      }
    </script>
    So it looks like the info I need is in:

    Code:
    position: results[0].geometry.location
    but I'm not sure how to enter that as a value in:

    Code:
    <input type='hidden' name='geolocation' value'?' />
    Warning: If you are taking advice from me, then you are in really bad shape. Let's both hope for your code's sake that someone comes along and pulls us out of this fix that I've gotten us into.

  4. #4
    Closet Nice Guy schwim's Avatar
    Join Date
    Jun 2006
    Location
    State of confusion
    Posts
    706
    I think I'm on the wrong track.

    On the web, I found some information on printing a variable, which I've tried to incorporate into my form:

    Code:
    <form method='post' name='geolocate_submit' action='../membermap.php?action=geolocate_submit'>
    				Address: <input type="text" id="inputTextAddress" style=" width:200px" title="Address to Locate"/>
    				<input type="button" onclick="codeAddress()" id="inputButtonGeocode" style="width:150px" title="Locate on map" value="Locate on map" />
    				<input type='hidden' name='user_id' value='".$user_id."' />
    				<input type='hidden' name='latlong' value='<script language="JavaScript">document.write(results[0].geometry.location);</script>' />
    				<input type='submit' action='Submit' name='Submit' value='This is My Location' />
    			</form>
    But it seems that I might be wasting my time because the variable would be set on pageload, correct? If that is the case, I don't know how to have the variable update. I imagine your suggestion of AJAX is the answer, but I don't know how to implement that at all.
    Warning: If you are taking advice from me, then you are in really bad shape. Let's both hope for your code's sake that someone comes along and pulls us out of this fix that I've gotten us into.

  5. #5
    Pedantic Curmudgeon Weedpacket's Avatar
    Join Date
    Aug 2002
    Location
    General Systems Vehicle "Thrilled To Be Here"
    Posts
    21,910
    Quote Originally Posted by schwim
    <input type='hidden' name='latlong' value='<script language="JavaScript">document.write(results[0].geometry.location);</script>' />
    I doubt that would even work, because HTML attribute values are strings, not HTML (and hence not HTML elements).

    The block of JavaScript you have in the previous post has a function that handles the geocoder result. You'll want to put the code there so that it will run when the geocoder's result is handled.

    You will need to know how to locate parts of the document. The document object model has a bunch of methods for that which are accessible in JavaScript (you can see one of them in the code you posted: GetElementById()). The model also provides each type of element with an interface for manipulating its properties (such as input elements); the form element interface, for example, includes a property that lists all the form fields contained by the form.
    THERE IS AS YET INSUFFICIENT DATA FOR A MEANINGFUL ANSWER
    FAQs! FAQs! FAQs! Most forums have them!
    Search - Debugging 101 - Collected Solutions - General Guidelines - Getting help at all

  6. #6
    Senior Member
    Join Date
    Jul 2007
    Posts
    3,675
    Quote Originally Posted by Weedpacket View Post
    You will need to know how to locate parts of the document. The document object model
    There's an alternative that might also work for you, and that's creating the form using javascript and post it directly from the function where you have the long/lat values. But you'd be using DOM either way. You might also want to look at jQuery for accessing and manipulating the DOM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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