延遲提交表格不起作用

Question

我嘗試在提交表單之前添加延遲，或者在提交表單之前等待ajax請求。 目標是從Google 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獲取我的數據。

如果Google api出現故障，延遲解決方案會更好，然后我沒有任何數據，但表單仍在提交。 還是這里的jQuery是錯誤的郎？

Answer 1

$('#orderform').submit(callback)回調將在javascript submit事件之后被調用，即該函數將在表單提交后被調用

而是我會推薦這種方法

使用提交按鈕的onclick而不是$（selector）.Submit（）

當您從地理位置API獲取數據時，使用

$('#orderform')[0].submit();

請確保將按鈕類型從type="submit"更改為type="button"否則該按鈕將觸發Submit事件

 $(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(); } }); }); }); 

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