Question

在我的页面上，我正在使用一个表单，在提交时应该获得一些额外的隐藏字段。但问题是我无法知道表单的名称/ 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，那里的字段。我的猜测是在触发beforeunload函数之前收集了$ _POST的数据。

我的问题是：“有没有解决方法，所以我可以在beforeunload事件中为表单添加隐藏字段？”。

非常感谢帮助，提前谢谢。

Answer 1

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

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

Answer 2

就像上面提到的评论一样，你可以挂钩提交事件。

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

在beforeunload中添加隐藏字段

2 个答案: