javascript - HTML 表单 onsubmit 有时仅起作用

Question

项目摘要:打开子弹出窗口并将信息输入到表单中。 Onsubmit时，信息被输入到数据库中，弹出窗口被隐藏，父页面被取消隐藏。然后父页面显示数据库中的信息。

在大多数情况下，我的代码都可以工作，但在某些情况下，当我提交表单时，窗口会关闭，并且信息不会添加到数据库中。我想知道是否需要在某个地方添加延迟，以便有时间将数据插入数据库，但我从未使用过任何计时代码，并且不确定它需要去哪里。有谁知道为什么它有时只会添加到数据库中？问题出现的时间往往是最初几次使用表单以及尝试依次输入相同信息时。

与表单相关的代码如下所示:

    <script>
    var db = window.openDatabase("DB1", "", "DB", 1024 * 1000)

    function closeSelf() {
        document.forms['moneyorder_form'].submit();
        hide(document.getElementById('AddMoneyOrderPopup'));
        unHide(document.getElementById('MoneyOrdersMain'));
    }

    $(document).ready(function () {
        $('#moneyorder_form').submit(function () {

            insertMO($('#moCNumber').val(), $('#moCAmount').val(), "MoneyOrder");
            renderMoneyOrders();
            return false;
        });
        renderMoneyOrders();
    });


</script>

<div data-role="page" id="AddMoneyOrderPopup">
    div data-role="content" data-theme="a">
        <h2 style="text-align:center">Money Order</h2>
        <form method="get" id="moneyorder_form" name="moneyorder_form" onsubmit="closeSelf()">
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <p style="text-align:center; display:inline"><b>Number</b></p>
                    <p><input type="number" required="required" step="1" id="moCNumber" name="moCNumber"></p></div>
                <div class="ui-block-b">
                    <p style="text-align:center; display:inline"><b>Amount</b></p>
                    <p><input type="number" required="required" min=".01" step=".01" id="moCAmount" name="moCAmount"></p>
                </div>
                <div class="ui-block-a">
        <input type="submit" data-role="button" data-theme="a" value="Add" />
                </div>
            </div>
        </form>
    </div>
    </div>

Answer 1

您似乎正在使用新的 HTML5 SQL API，而不是服务器支持的数据库。 如果是这种情况，HTML5 支持接受可选错误和成功回调的 transaction 函数:

db.transaction(function(tx) {
  // executeSql
}, opt_errorCallback, opt_successCallback);

因此，我不会添加计时器，而是创建两个回调，并且仅在调用成功回调时才显示新记录。