如何确保在 POST 之前完成对表单 DOM 的更改？答案

【问题标题】：How can I ensure that changes to a form DOM are complete before POSTing?如何确保在 POST 之前完成对表单 DOM 的更改？
【发布时间】：2009-11-17 00:04:57
【问题描述】：

目前我的 JavaScript 代码中存在竞争条件。我试图用这段代码做的是转换所有复选框，这些复选框是“复选框”类的一部分，并且没有被检查到值为零的文本框中。目前，当您发布未选中的复选框时，它不会出现在 $_POST 数据中。但是，我需要知道这些特定复选框的所有值，无论是真还是假。

我的代码在这里：代码：

function checkboxConvert() {

  var chkBxs = $$('.checkbox');
  for (var i = 0; i < chkBxs.length; i++) {
    if (chkBxs[i].checked == false) {
      chkBxs[i].type = 'textbox';
      chkBxs[i].value = '0';
    }
  }

  setTimeout("document.productForm.submit();",1000);
}

现在我遇到的问题是，当我尝试提交此表单时，最近更改的文本框的值不会出现在 $_POST 数据中。因此，正如您在上面看到的，我将页面提交推迟了 1 秒，然后我就拥有了所有可用的数据。然而，随着时间的推移，我的数据集变得越来越大，1 秒可能已经不够了。我认为这是一种竞争条件，只有在所有复选框都已转换并且它们具有新值之后，我才需要找出某种运行代码的方法。我从一开始就认为这是不必要的，但由于某种原因，它试图同时运行这两个部分，并且在我有适当的值之前我无法提交。

非常感谢任何帮助！

【问题讨论】：

DOM 操作很慢。我的猜测是文本框转换的速度比您的时间限制慢，正如您可能已经想到的那样。
FWIW：根据 MSDN，一旦将 input 元素的 type 添加到文档中（在 Internet Explorer 中），您将无法更改它。因此，您可能需要重新考虑整个策略...（参考：msdn.microsoft.com/en-us/library/ms534700.aspx）

标签： javascript html forms dom

【解决方案1】：

这绝对不是做 web 的方式。我强烈建议您放弃您的 checkboxConvert 功能，并在服务器端解决此问题

【讨论】：

我同意这一点。在您的服务器端代码中，没有复选框意味着没有价值。这足以告诉你它是零。如果您依靠文本框的存在来知道该怎么做，那么您将遇到一个完全不同的安全问题。

【解决方案2】：

JavaScript always runs single-threaded in the browser 所以我认为这不是竞争条件。

【讨论】：

【解决方案3】：

我通常同意其他人的观点，即您不应该这样做，但您的问题可能是您将元素更改为“文本框”类型而不是“文本”类型。如果您在 HTML 标记中声明“文本框”类型的输入，它通常会呈现为文本字段，因为这是默认设置。但是，将已经有效的“复选框”类型输入更改为无效的“文本框”可能无法预测。

尝试将其更改为：

function checkboxConvert() {

  var chkBxs = $$('.checkbox');
  for (var i = 0; i < chkBxs.length; i++) {
    if (chkBxs[i].checked == false) {
      chkBxs[i].type = 'text';
      chkBxs[i].value = '0';
    }
  }

  // Because JS in the browser is single-threaded, this
  //  cannot execute before the preceding loop completes anyway.
  document.productForm.submit();
}

【讨论】：

【解决方案4】：

必须有更好的方法来做到这一点。尝试类似：

了解服务器端所有可能的值。看起来您正在使用 PHP；保留一个包含复选框名称的简单数组。
当您获取 $_POST 数据时，请删除您从数组中接收到值的复选框的名称。
剩下的都是假的。

【讨论】：