用php和javascript实现表单onsubmit

Question

我有一个网站，加载数据的基础上，用户输入的形式。我还想刷新基于相同输入的google地图。不幸的是，当我提交表单时，它通过SQL查询正确地检索了数据，但是刷新了页面，导致google地图重置为原始起点。解决这个问题的最佳方法是什么？

以下是表单代码：

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

以下是google地图脚本的一部分：

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

如果您不想重新加载页面，请不要执行onsubmit。相反，将您的HTML更改为...

<div id="user-location">
    <input id="addressInput" name="addressInput" type="text" maxlength="5"/>
    <input id="submit4" value="GO" type="submit" onclick="codeAddress();"/>
</div> 

然后，在您运行地理编码请求后，您的Javascript将只更新地图，而不提交表单。或者，您也可以使用jQuery来附加单击事件，如下所示...

$(document).ready(function () {
    $('#submit4').click(function () {
        codeAddress();
    });
});

或者你可以把你的整个请求插入其中。要使其正常工作，您需要删除onclick事件。但是如果你不想依赖于jQuery，只需要使用第一种解决方案。再说一次，关键是不做完整的提交。为了与PHP文件通信，让您的函数通过...以JSON格式返回结果。

echo json_encode($geodata);

..。然后用$.getJSON请求它，这是一个jQuery实用程序，它的工作原理如下...

$.getJSON('[php script name].php[?any args]', function(data) {
    // assign your geocodes here
});

Answer 2

您希望阻止表单的默认行为，即提交，对于跨浏览器解决方案，我建议使用jQuery的阻止默认功能。Check it out here.