当有大量数据需要提交时，form.submit() 会花费更多时间

Question

我们有一个网页可以让用户撰写和发送电子邮件。 我们使用的 HTML 编写器是 FCK Editor。 当他们撰写并说发送时

1. 我们验证电子邮件和主题。
2. 为了避免用户不进一步 操作表单我们隐藏整个表单并启用另一个 DIV 说 “正在发送邮件...请稍候”
3. 我们提交表单

在我们说的结果页面中提交完成后

“邮件发送成功”

如果我们在 FCK 编辑器中加载大量 HTML 内容并saye 发送。 结果如下............

1. 我们验证电子邮件和主题

   这发生得很快

2. 为了避免用户不进一步操作表单，我们隐藏了整个表单并启用另一个 DIV，上面写着 “正在发送邮件...请稍候”

   此 Div 未启用

3. 我们提交表格

   提交需要更多时间。直到表单获取提交“邮件发送...请 等待” div 不显示。

我们有什么办法可以解决这个问题，要么提交应该快速发生，要么应该显示 DIV，以便向用户传达它正在处理的信息。

我们有一个名为 main_div 的 DIV

1. 发送电子邮件 - 文本框
2. 主题 - 文本框
3. HTML 编辑器 - FCK 编辑器
4. 发送 - 按钮

我们有另一个名为 loadingDiv 的 DIV，它有

“正在发送邮件...请稍候”

这里点击发送是我们调用的java脚本

函数 sendMailClick(form,temp) {

document.getElementById('main_div').style.display = 'none';

document.getElementById('loadingDiv').style.display = 'block';

form.api.value = temp;

form.submit();

}

Answer 1

显然，负责显示 div 的 JS 代码存在问题。也许它没有被正确执行，或者它似乎无法找到 div 元素或者你用来显示它的方式是错误的？

无论如何，这是一个应该有效的启动示例：

<form id="form" onsubmit="processSubmit(this);"><input type="submit"></form>
<div id="progress" style="display: none;">submit in progress..</div>

与

<script>
    function processSubmit(form) {
        validate(form);
        form.style.display = 'none';
        document.getElementById('progress').style.display = 'block';
    }
</script>

基本上就这些了。

使用像 Firebug 这样的 JS 调试器应该可以对 JS 代码中发生的事情提供很多新见解。