在 beforeunload 中添加隐藏字段答案

【问题标题】：Adding hidden field in beforeunload在 beforeunload 中添加隐藏字段
【发布时间】：2011-12-09 08:50:22
【问题描述】：

在我的页面上，我使用的表单在提交时应该会获得一些额外的隐藏字段。然而，问题是我不知道表单的名称/ID，也不知道提交按钮，所以我不能使用 onClick 等功能。因此，当用户尝试离开时，我使用 beforeunload 事件来触发事件页面（这包括提交表单）。我正在使用 document.activeElement 找出触发事件的原因，如果它是表单/提交，我正在将隐藏字段添加到表单中。

将代码简化为如下所示：

var javascriptData = ['val1','val2','val3']; // usually gets values dynamically and can differ in size
$(window).bind('beforeunload', function(e) {
    var activeForm = document.activeElement.form;
    for(var i = 0; i < javascriptData.length; i++){
        $(activeForm).append('<input type="hidden" name="test-data[]" value="'+javascriptData[i]+'" />');
    }
    return false; // just for debug purposes.
}

代码有效并且元素已添加到表单中，但它没有显示在下一页的 $_POST 中。但是，最后一行代码（返回 false）会创建一个弹出窗口，询问我是否要离开页面，如果我留在页面上，请再次按下提交按钮并然后离开页面并检查 $_POST，那里的字段。我的猜测是 $_POST 的数据是在触发 beforeunload 函数之前收集的。

我的问题是：“有没有办法解决这个问题，以便我可以在 beforeunload 事件中向表单添加隐藏字段？”。

非常感谢您的帮助，在此先感谢。

【问题讨论】：

我不明白你的过程。如果卸载是因为提交，您只需要添加隐藏字段。因此，如果您可以在 onBeforeUnload 上添加它们，您也可以在 onSubmit 上添加它们。那你为什么不呢？
我事先不知道表单的名称/ID，所以我认为特定于 onSubmit 的表单是不可能的。您的回答和评论的结合让我意识到我可以在页面上的所有表单中添加一个 onsubmit，并且只将隐藏字段添加到提交的表单中。我不知道为什么我没有早点想到这一点。想我会尝试这样做，谢谢。

标签： javascript jquery forms post

【解决方案1】：

为什么不将其添加到页面上的所有表单中？

$(document).ready(function() {
  $("form").append('<input type="hidden" name="test-data[]" value="test" />');
});

【讨论】：

对不起，我在写帖子的时候删掉了太多代码，没有把问题说清楚。我编辑了帖子，现在，如您所见，它遍历了一个 javascript 数组并将其中的值用于隐藏字段。该数组由用户填充，因此不知道 document.ready 中的内容。

【解决方案2】：

和上面提到的 cmets 一样，你可以只钩住提交事件。

$('form').submit(function() {
    for(var i = 0; i < javascriptData.length; i++){
        $(this).append('<input type="hidden" name="test-data[]" value="'+javascriptData[i]+'" />');
    }
}

【讨论】：