Question

以下是我正在做的事情和原因：

我有一个表单，使用不同的脚本进行预处理根据用户输入
通常脚本在不到几秒的时间内执行，但是一个脚本可能需要大约10秒钟，具体取决于服务器负载等。
现在我要实现这个“弹出窗口”，其中包含：“请稍候虽然......“我正在使用blockUI - 用于实现的简单插件此。
然而，作为用户，用于快速脚本执行的blockUI非常愚蠢只会看到屏幕上的弹出窗口闪烁。
因此我想为它设置超时，比如1000ms，这样就是blockUI 即使表格已经完成，也会显示
到目前为止，我已经尝试了很多东西，现在我基本上都在用 preventDefault取消setTimeout的表单提交，但是Im 在此之后无法填写表格。

编辑：发现，由于javascript是异步语言，没有preventDefault（停止表单提交），setTimeout永远不会启动，动作会立即返回true。

<form method="post" name="my_form" id="my_form" enctype="multipart/form-data">
    <input type="submit" name="my_submit" id="my_submit" value="Submit" />
    <div id="form_loading_message" style="display:none;"> 
        <h1>Please wait, page is loading...</h1> 
    </div>
</form>

$('#my_submit').click(function(event) {
    $.blockUI({
        message: $('#form_loading_message')
    });
    var form = $('#my_form');
    event.preventDefault();
    setTimeout(function () {
        form.unbind('submit').submit();
        $.unblockUI();
    }, 1000);
});

如果您更好地了解如何做到这一点，那么，我也愿意接受其他建议......

Answer 1

不熟悉blockUI，但是......我会这样做：

<html>
    <head>
        <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#my_submit').click(function() {
                    $('#form_loading_message').show();
                    setTimeout('submitForm()', 1000);
                });
            });

            function submitForm(){
                $('#my_form').submit();
            }

        </script>
</head>
<body>
<form method="post" name="my_form" id="my_form" action="google.com" enctype="multipart/form-data">
    <input type="button" name="my_submit" id="my_submit" value="Submit" />
    <div id="form_loading_message" style="display:none;"> 
        <h1>Please wait, page is loading...</h1> 
    </div>
</form>
</body>
</html>

Answer 2

由于我没有找到如何使用javascript执行此操作，因此在将用户重定向到另一个页面之前使用了php sleep（）-function。当然阻止提交操作时，自然需要删除默认。此解决方案为我解决了用例：只是向用户显示页面正在加载的消息。

如何在表单提交时使用blockUI和setTimeout以及preventDefault？

2 个答案: