Question

我尝试在提交表单之前添加延迟或在提交表单之前等待ajax请求。目标是从谷歌api获取地理数据（lat + lng），将其写入隐藏（display：none）输入字段，然后提交表单。

我这样试试。延迟有效但在5000毫秒之后页面才重新加载而不提交。

$('#orderform').submit(function (event) {
    var form = this;
    event.preventDefault();
    setTimeout(function () {
        form.submit();
    }, 5000); // in milliseconds

     var address = $('#ustreet').val() + " " + $('#ustreetnr').val() + ", " + $('#uplz').val();

     $.ajax({
            url: 'https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&key=123456789',

            dataType: 'json',
            success: function(json) {
            geo = json.results[0].geometry.location.lat + ", " + json.results[0].geometry.location.lng;

            $('#oxmailcheck').val(geo);

            }

    });

});

我的表格来自氧化，看起来像这样：

<form action="[{ $oViewConf->getSslSelfLink()|oxaddparams:"cl=user" }]" name="order" method="post" id="orderform">
<div>
[{ $oViewConf->getHiddenSid() }]
[{ $oViewConf->getNavFormParams() }]
<input type="hidden" name="option" value="[{$oView->getLoginOption()}]">
<input type="hidden" name="cl" value="user">
<input type="hidden" name="CustomError" value='user'>
<input type="hidden" name="blhideshipaddress" value="0">
[{if !$oxcmp_user->oxuser__oxpassword->value }]
<input type="hidden" name="fnc" value="createuser">
[{else}]
<input type="hidden" name="fnc" value="changeuser">
<input type="hidden" name="lgn_cook" value="0">
[{/if}]
</div>

<input id="ustreet" type="text" class="input-m" size="28" maxlength="255" name="invadr[oxuser__oxstreet]" value="[{if isset( $invadr.oxuser__oxstreet ) }][{$invadr.oxuser__oxstreet }][{else}][{$oxcmp_user->oxuser__oxstreet->value }][{/if}]">
<input id="ustreetnr" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxstreetnr]" value="[{if isset( $invadr.oxuser__oxstreetnr ) }][{ $invadr.oxuser__oxstreetnr }][{else}][{ $oxcmp_user->oxuser__oxstreetnr->value }][{/if}]">
<input id="uplz" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxzip]" value="[{if isset( $invadr.oxuser__oxzip ) }][{$invadr.oxuser__oxzip }][{else}][{$oxcmp_user->oxuser__oxzip->value }][{/if}]">
<input class="button medium" name="userform" type="submit" value="[{ oxmultilang ident="USER_NEXTSTEP" }]">
</form>

有没有办法在提交表单之前延迟实现我的目标，或者在json请求成功之后提交表单并且我从google api获取数据。

如果谷歌api关闭，延迟解决方案会好得多，然后我没有数据，但表格仍在提交。或者jquery在这里是错误的郎？

Answer 1

$('#orderform').submit(callback)将在javascript submit事件后调用回调，即在提交表单后将此函数称为

相反，我会推荐这种方法

使用onclick提交按钮而不是$（选择器）.Submit（）

当您从地理定位API获取数据时，使用
提交表单
$('#orderform')[0].submit();

确保您将按钮类型从type="submit"更改为type="button"，否则该按钮将触发提交事件

＆＃13;
＆＃13;
$(document).ready(function(){ $('#SubmitFormButton').click(function (event) { var form = this; event.preventDefault(); setTimeout(function () { form.submit(); }, 5000); // in milliseconds var address = $('#ustreet').val() + " " + $('#ustreetnr').val() + ", " + $('#uplz').val(); $.ajax({ url: 'https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&key=123456789', dataType: 'json', success: function(json) { geo = json.results[0].geometry.location.lat + ", " + json.results[0].geometry.location.lng; $('#oxmailcheck').val(geo); $('#orderform')[0].submit(); } }); }); });
＆＃13;
<form action="[{ $oViewConf->getSslSelfLink()|oxaddparams:"cl=user" }]" name="order" method="post" id="orderform"> <div> [{ $oViewConf->getHiddenSid() }] [{ $oViewConf->getNavFormParams() }] <input type="hidden" name="option" value="[{$oView->getLoginOption()}]"> <input type="hidden" name="cl" value="user"> <input type="hidden" name="CustomError" value='user'> <input type="hidden" name="blhideshipaddress" value="0"> [{if !$oxcmp_user->oxuser__oxpassword->value }] <input type="hidden" name="fnc" value="createuser"> [{else}] <input type="hidden" name="fnc" value="changeuser"> <input type="hidden" name="lgn_cook" value="0"> [{/if}] </div> <input id="ustreet" type="text" class="input-m" size="28" maxlength="255" name="invadr[oxuser__oxstreet]" value="[{if isset( $invadr.oxuser__oxstreet ) }][{$invadr.oxuser__oxstreet }][{else}][{$oxcmp_user->oxuser__oxstreet->value }][{/if}]"> <input id="ustreetnr" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxstreetnr]" value="[{if isset( $invadr.oxuser__oxstreetnr ) }][{ $invadr.oxuser__oxstreetnr }][{else}][{ $oxcmp_user->oxuser__oxstreetnr->value }][{/if}]"> <input id="uplz" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxzip]" value="[{if isset( $invadr.oxuser__oxzip ) }][{$invadr.oxuser__oxzip }][{else}][{$oxcmp_user->oxuser__oxzip->value }][{/if}]"> <input id="SubmitFormButton" class="button medium" name="userform" type="button" value="[{ oxmultilang ident="USER_NEXTSTEP" }]"> </form>
＆＃13;
＆＃13;
＆＃13;

提交表格之前的延迟不起作用

1 个答案: