SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Passing input value from one page to another

    I'm fairly new at this. I'm trying to build a store locator and trying to figure out how to pass an input value from one page to another page. User would input their zipcode or address in a form on one page and the map and locations would be called on another page using the input.

    I'm using ehound store locator platform (sample - here -> http://www.ehoundplatform.com/api/1....nd-google.html)

    The map/locator script is this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Store Locator Demo using FreeHound and Google Maps V.3</title>
    <style type="text/css">
    #map_canvas {
      height: 400px;
      width:710px;
      margin-bottom: 10px;
    }
    .addressBox {
    	margin-bottom:10px;
    }
    </style>
    <script type="text/javascript" src="http://www.ehoundplatform.com/api/1.0/proximity.js?key=xz396aw1qe432q1"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=AU"></script>
    <script type="text/javascript">
      var geocoder;
      var map;
      var bounds;
      var markersArray = [];
      var infoWindow;
      var mapCenterLat = '-28.1594';
      var mapCenterLon = '135.6456';
      
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var myOptions = {
          zoom: 4,
          center: new google.maps.LatLng(mapCenterLat, mapCenterLon),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        //initialise single info window to show only one at a time
        infoWindow = new google.maps.InfoWindow();
        
        //improve usability by centering map around search point on zoom in/out
        google.maps.event.addListener(map, 'zoom_changed', function() {
          if(mapCenterLat && mapCenterLon) {
          	setTimeout('centerMap(mapCenterLat, mapCenterLon)', 300);
          }
        });
      }
      
      function addMarkerOverlay(location, title, infoBox, image) {
    	  var marker = new google.maps.Marker({
    		position: location,
    		map: map,
    		icon: image
    	  });
    	  marker.setTitle(title);
    	  
    	  google.maps.event.addListener(marker, 'click', function() {
    			 infoWindow.setContent(infoBox);
    			 infoWindow.open(map, marker);
    		});
    	  
    	  markersArray.push(marker);
    	}
    	 
    	function deleteOverlays() {
    	  if (markersArray) {
    			for (i in markersArray) {
    				markersArray[i].setMap(null);
    			}
    			markersArray.length = 0;
    	  }
    	}
    	
      function searchAroundMe() {
        deleteOverlays();
        
        bounds = new google.maps.LatLngBounds();
        
        var address = document.getElementById("address").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            
            //custom marker to mark initial search location
            var image = new google.maps.MarkerImage('search_location.png',
          		// This marker is 32 pixels wide by 32 pixels tall.
          		new google.maps.Size(32, 32),
          		// The origin for this image is 0,0.
          		new google.maps.Point(0,0),
          		// The anchor for this image is the center of the red circle at 16,16.
          		new google.maps.Point(16, 16)
          	);
    				
            addMarkerOverlay(results[0].geometry.location, 'search spot', 'search initiated from here', image);
            bounds.extend(results[0].geometry.location);
            
            var searchLatitude = results[0].geometry.location.lat();
            var searchLongitude = results[0].geometry.location.lng();
    				
    				mapCenterLat = searchLatitude;
    				mapCenterLon = searchLongitude;
            
            freeHound = new FreeHound( 'showLocs' );
            search = new FH_Search(); 
    				search.count = 10; //number of locations to be returned in the result set
    				search.max_distance = 0; //distance limit for proximity search in km, 0 for unlimited
    				//search from a specific point using latitude and longitude of that point
    				search.point = new FH_Location( new FH_LatLon( searchLatitude,searchLongitude ) );
    				
    				//search.filters = new Array();
    				//search.filters.push( new FH_SearchFilter('cat_id', 'eq', '177') );
    				
    				search.create_log = false;
    				freeHound.proximitySearch( search );
          } else {
            alert("Geocode was not successful for the following reason: " + status);
          }
        });
      }
      
      function showLocs(response){
    		if ( response.error_code ) {
    			alert(response.error_message);
    		}
    		
    		if ( response.record_set ) {
    			//show results in a table
    			var resultsTable = '<table border="1" cellspacing="0" cellpadding="3" summary="">';
    			resultsTable += '<tr>';
    			resultsTable += '<td>#<\/td>';
    			resultsTable += '<td>Street Address<\/td>';
    			resultsTable += '<td>Town/Suburb/City<\/td>';
    			resultsTable += '<td>Postal Code<\/td>';
    			resultsTable += '<td>State/Province<\/td>';
    			resultsTable += '<td>Distance<\/td>';
    			resultsTable += '<td>Longitude<\/td>';
    			resultsTable += '<td>Latitude<\/td>';
    			resultsTable += '<\/tr>';
    			
    			for (var record_count = 0, rl = response.record_set.length; record_count < rl; record_count++ ) {
    				var record = response.record_set[record_count];
    				var title = record.details.location_name;
    				var infoBoxContent = '<strong>Location #'+(record_count+1).toString()+'<\/strong>';
    				infoBoxContent += '<br \/>'+record.address.street_address+'<br \/>'+record.address.town + ', ' + record.address.postal_code +'<br \/>';
    				infoBoxContent += 'Distance: '+record.distance.km+'km<br \/>';
    				addMarkerOverlay(new google.maps.LatLng(record.latitude, record.longitude), title, infoBoxContent, null);
    				
    				if (record_count < 6) {
    					bounds.extend(new google.maps.LatLng(record.latitude, record.longitude));
    				}
    				
    				resultsTable += '<tr>';
    				resultsTable += '<td>'+(record_count+1).toString()+'<\/td>';
    				resultsTable += '<td>'+record.address.street_address+'<\/td>';
    				resultsTable += '<td>'+record.address.town+'<\/td>';
    				resultsTable += '<td>'+record.address.postal_code+'<\/td>';
    				resultsTable += '<td>'+record.address.state+'<\/td>';
    				resultsTable += '<td>'+record.distance.km+'KM<\/td>';
    				resultsTable += '<td>'+record.longitude+'<\/td>';
    				resultsTable += '<td>'+record.latitude+'<\/td>';
    				resultsTable += '<\/tr>';
    			}
    			
    			map.fitBounds(bounds);
    			
    			resultsTable += '<\/table>';
    	
    			var resultSet = document.getElementById('resultSet');
    			resultSet.innerHTML = resultsTable;
    		}
      }
      
      function centerMap(lat,lon) {
    		var centrePoint = new google.maps.LatLng(lat,lon);
    		map.setCenter(centrePoint);
    	}
    </script>
    </head>
    <body onload="initialize()">
      <div class="addressBox">
    
        <form action="" onsubmit="searchAroundMe(); return false;">
        <input id="address" type="textbox" value="">
        <input type="submit" name="search" value="Address Search">
        </form>
      </div>
      <div id="map_canvas"></div>
      <div id="resultSet"></div>
    </body>
    </html>
    and the form itself would be on another page. Trying to pull the address input over. This obviously doesn't work

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>KOI Store Locator</title>
    </head>
    <body>
      <div>
    
        <form action="ehound.html" method="post">
        <input id="address" name="address" type="textbox">
        <input type="submit" name="search" value="Address Search">
        </form>
      </div>
    
    </body>
    </html>
    I've looked around on passing inputs via php and such, but this script seems to call on javascript as well and I'm having trouble implementing anything that works. Any help would be greatly appreciated.

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,343
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    That javascript (it is an entire webpage) performs all the proximity search operations 'in place'. Take note of the "Initialize" method near the top. It instantiates a google.Maps object (which inherently writes to the 'map_canvas' dive element.
    Code:
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    If you use that page as your "goto" page, you can use PHP to pass variables into those Javascript functions.
    This requires setting the "address" variable here
    Code:
        var address = document.getElementById("address").value;
    And calling 'searchAroundMe();' after a call to 'Initialize();'
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ParkinT View Post
    That javascript (it is an entire webpage) performs all the proximity search operations 'in place'. Take note of the "Initialize" method near the top. It instantiates a google.Maps object (which inherently writes to the 'map_canvas' dive element.
    Code:
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    If you use that page as your "goto" page, you can use PHP to pass variables into those Javascript functions.
    This requires setting the "address" variable here
    Code:
        var address = document.getElementById("address").value;
    And calling 'searchAroundMe();' after a call to 'Initialize();'

    So could I do this? Pass through PHP. Then change this
    Code:
     var address = document.getElementById("address").value;
    in the searchAroundMe() function to
    Code:
     var = <?=$_POST['address'];?>
    ??

    Then are you saying do
    Code:
    <body onload="initialize(); searchAroundMe()">
    ?

    It's not working. I suck. I also tried passing the PHP variable into the form like so
    Code:
         <form action="" onsubmit="searchAroundMe(); return false;" name="locatorForm">
        <input id="address" type="textbox" value="<?=$_POST['address'];?>">
        <input type="submit" name="search" value="Address Search">
        </form>
    
    <SCRIPT LANGUAGE="javascript">
    document.locatorForm.submit();
    </SCRIPT>
    and doing a javascript auto submit, but it just keeps looping. Help!

  4. #4
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, if you're using php, you could grab it from the $_POST global array. If you only want to use javascript, you can use get instead of post and grab in the value from the url on the next page via window.location.href...

  5. #5
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,343
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    That is the idea I was proposing. I am not sure why it did not work for you.
    Have you taken a look at the "View Source" on the PHP page; to verify the 'address' was written into the javascript "var" as expected?

    Standard troubleshooting techniques mandate you take it one step at a time.
    Verify you are passing the POST parameters correctly from your 'form' page to the 'javascript' (output) page.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  6. #6
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Yes, Thank YOU! I got it working. I'm learning everyday.


Bookmarks

Posting Permissions

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