stackoom
  简体   繁体   中英

Passing Input From One Page To Another

 原文  2011-07-15 19:47:29  9   3    javascript/ forms

Question

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

<!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

<!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.php" 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.

3 answers

solution1
 1  2011-07-15 20:04:25

Attach a click handler to your form submission button, in the handler simply get the values needed from your form, build a query string with the needed parameters, and window.location.assign("yourotherpage.html?"+theQueryString). Then just pull the query string parameters in the javascript on the other page.

solution2
 0  2011-07-15 20:12:35

I am not sure what ehound is but in general there are 2 good ways to do this.

You just submitted a form which sends data to the server, so just have the server insert the data you need into the next page. The specifics of how to accomplish this would be mostly dependant on what server you are using.

Or a non server approach: store a cookie and then if the other page is on the same domain then you should be able to retrieve it. Cookies are easy, http://www.quirksmode.org/js/cookies.html (you can skip the long and mildly confusing explanation about the specifics of cookies and just grab the script).

solution3
 0  2011-07-15 20:14:42

Another way you could pass the information around is in a hidden form element. This qustion is pretty similar and has some good advice.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question passing input details from one page to another page textarea Passing a value from one input to another in jQuery Passing values from one input field to another Passing generated id from one page to another Passing FORM Data from one page to another Passing form variables from one page to another Passing id from one page to another in angularjs Passing Variables from one page to another Passing Url params from one page to another Passing value from one html to another page
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM