我有两个PHP函数 – 一个构建一个html表单,另一个在提交时处理它.
我想在html中添加一个javascript onClick函数,它将表单的一个字段发送到外部API(Google Maps)并将回复保存在表单中的隐藏字段中,以便处理PHP函数也可以获取该数据.
我的问题是 – 如何确保处理PHP函数仅在onClick函数完成后触发？
或者也许我不能和我必须使用ajax？
解决方法:
你需要2个事件才能完成这个任务.
>按钮的onClick事件,用于执行Google地图请求并将数据保存到本地表单中
>表单的onSubmit事件.您将使用此事件来查看表单是否可提交.基本上,检查以确保您的Google地图请求已经运行并已完成,然后才能提交表单.
例：
<script>
var googleMapsDone = false;
$('#gmap_button').click(function(event)
{
doGoogleMapThing(function()//callback from googlemaps
{
//save data to local form for processing by script once posted
googleMapsDone = true;
});
});
$('#form').submit(function(event)
{
//check to see if we did our google maps stuff, and that its done
if (false == googleMapsDone)
{
event.preventDefault();
return false;
}
});
</script>
使用该代码,只要用户等待谷歌地图和点击提交,就不会发生任何事情.他们将不得不等待GMaps的回复,然后点击提交.对于某些事情,这是可以的,但是如果您尝试向不需要用户输入/交互/反馈的GMaps进行后台请求(可能在提交表单时获取其地址的Long / Lat),那么您可以修改代码当你得到回复时有点发帖.一个例子是：
<script>
var googleMapsDone = false, submitWaiting = false;
$('#gmap_button').click(function(event)
{
doGoogleMapThing(function()//callback from googlemaps
{
//save data to local form for processing by script once posted
googleMapsDone = true;
/* check to see if submitWaiting is TRUE. If it is, automatically
post the form when we get the response.
*/
if (submitWaiting)
{
$('#form').submit();
}
});
});
$('#form').submit(function(event)
{
//check to see if we did our google maps stuff, and that its done
if (false == googleMapsDone)
{
event.preventDefault();
/* set our submitWaiting flag which we will use in our clalback
so when we get our google maps response, we post our form right
away
*/
submitWaiting = true;
/* You might want to display a modal or some other kind of notification
that the form post is 'working' or 'processing' so when the user
clicks it and doesn't see anything happening, they don't bail
or click it 800 times out of frustration
*/
return false;
}
});
</script>
编辑：我意识到我在下面的评论是如何工作的……很难理解,所以让我在这里解释,然后展示一个替代方案.
>用户填写表格
>用户点击按钮在Google地图上执行操作(示例是在我知道GMaps请求的范围/上下文之前编写的,所以这就是为什么这样做了)
>如果用户在GMap请求完成之前单击“提交”,我们取消提交并设置标志submitWaiting
> GMaps请求返回,并执行我们的回调.我们的回调知道如何查找submitWaiting,如果设置为true,则提交表单
除此之外,您可以将事件更改为地址输入框的onChange事件,而不是要求GMaps请求的用户交互,或者您可以通过提交按钮/事件完成所有操作,如下所示：
<script>
$('#form').submit(function(event)
{
//lets look up our user's address!
doGoogleMapThing(function()//callback from googlemaps
{
//do stuff with your inputs, or whatever
$('#form').submit();
});
event.preventDefault();
return false;
});
</script>
编辑注释：上面的示例假设您正在使用jquery,并且您的Google地图API请求是通过javascript完成的
如果你的谷歌地图api请求没有使用谷歌地图javascript库,这仍然是可能的,只需要你通过本地域的PHP脚本为API制作一个“代理”脚本. (浏览器限制).它就像这样：
<script>
function doGoogleMapThing(callback_when_done)
{
$.post("/path/to/proxy/script.PHP", { data: to, post: to_server }, function(response)
{
//check & parse response
callback_when_done(/* Data needed to populate form */);
});
}
</script>
注意：这两个示例都假定使用jquery.因为……嗯……你为什么不这样做.
以下是您的确切脚本的实现.我改变了一点使用jquery,因为它让事情变得不那么痛苦.
<script type=”text/javascript”
src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type=”text/javascript”>
function codeAddress(callback)
{
var address = $('#address').val();
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
$('#latitude').val( results[0].geometry.location.latitude );
$('#longitude').val( results[0].geometry.location.longitude );
if (typeof callback != 'undefined') //call the callback.
{
callback(true);
}
}
});
/* Just in case google returns a bad response or doesn't return at all
we need to add a timeout that will call the callback after 10 seconds
just so we make sure our user doesn't hang.
*/
setTimeout(function(){
callback(false); //pass false indicating no/invalid response
}, 10000); //10000ms = 10s
}
/* We are using the reallySubmit variable as a flag here, to kNow when we finish
our call to google maps and that we want to really submit our form.
we have to do this because the form.submit() call fires the form's submit event
again, and we end up going into an infinite loop.
an alternative to this would be to bind your form processing to the form's submit
button's click event. that should also pick up any presses of the enter key, also.
the solution below also works.
*/
var reallySubmit = false;
$('#form').submit(function(event)
{
if (false == reallySubmit)
{
//lets look up our user's address!
codeAddress(function(success)//callback from googlemaps
{
reallySubmit = true;
$('#form').submit();
});
event.preventDefault();
return false;
}
});
</script>
