使用php和javascript表单提交

Question

I have a site that loads data based on user input in a form. I also want to refresh a google map based on that same input. Unfortunately, when I submit the form, it correctly retrieves the data through an SQL query but refreshes the page causing the google map to reset to the original starting point. What is the best way to resolve this?

Here is the form code:

<form id="user-location" method="post" action="#" onsubmit="return codeAddress();">
                    <input id="addressInput" name="addressInput" type="text" maxlength="5">

                   <input id="submit4" value="GO" type="submit"  >

                </div>
</form>

Here is part of the script for google maps:

function codeAddress() {
  var address = document.getElementById('addressInput').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

Answer 1

You're looking to prevent the form's default behavior, which is to submit, and for a cross-browser solution, I'd recommend jQuery's prevent default function. Check it out here.