页面重新加载时自动提交表单答案

【问题标题】：Auto submit form on page reload页面重新加载时自动提交表单
【发布时间】：2021-05-31 00:54:37
【问题描述】：

我尝试了几种不同的方法，但似乎都不适合我。在我解释一下之后，我将输入我尝试过的方法。我有一个 ID 为“commentform”的表单，我想在页面重新加载并且用户没有单击提交按钮时自动提交用户输入。提交按钮的 id 为“提交”。表单的 textarea 字段是“评论”（我认为这不相关。

尝试 1：结果：访问时自动重新加载页面，填写文本表单时出错。

<script type="text/javascript">
jQuery(window).on('load', function() {
jQuery('#submit').click();
});
</script>

尝试 2：结果：什么都没有发生。

<script type="text/javascript">
    window.onbeforeunload = function () {
    jQuery('#submit').click();
    });
    </script>

尝试 3：结果：什么都没有发生。

<script type="text/javascript">
    window.onload = function () {
    jQuery('#commentform').click();
    });
    </script>

尝试 4：结果：什么都没有发生。

<script type="text/javascript">
    jQuery(window).on('beforeunload', function() {
    jQuery('#commentform').click();
    });
    </script>

尝试 5：结果：什么都没有发生。

<body onbeforeunload ='checkRequest(event)'>
//form is here
<script type="text/javascript">
            function checkRequest(event){
                var __type= event.currentTarget.performance.navigation.type;
                if(__type === 1 || __type === 0){
                    document.getElementById('commentform').submit();
                }
            }
        </script>
</body>

尝试 6：结果：没有

<script type="text/javascript">
        window.onbeforeunload = refreshCode;
function refreshCode(){
   document.getElementById("commentform").submit();
   return null;
}
        </script>

尝试 7：结果：没有

<script type="text/javascript">
        window.onload = function(){
  document.forms['commentform'].submit();
}
        </script>

更新如果重要的话；表单没有硬编码到刷新的页面上。它在另一个文件中，并使用<?php timed_comment_template( '/short-comments-timed.php' ); ?> 调用我还通过注释掉该调用并将其硬编码到页面中来尝试这些解决方案，但收到相同的结果。表格：

<form id="commentform" action="<?php echo esc_url(get_option('siteurl')); ?>/timed-comments-post.php" method="post">
                <div id="form-section-comment" class="form-section">
                  <div class="form-textarea">
                  <textarea id="comment" name="comment" cols="45" rows="8" tabindex="6"></textarea>
//another javascript is here for counting words.
                  </div>
              </div>
              <div class="form-submit"><input id="submit" name="submit"  class="button-small button-green" type="submit" value="Submit" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo esc_attr($id); ?>" /></div>
              <?php comment_id_fields(); ?>
            </form>
//problem javascript is going here.

【问题讨论】：

标签： javascript

【解决方案1】：

我认为您不能可靠地使用 onbeforeunload 事件来提交表单。它用于通过显示阻止消息对话框 (https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event) 来警告用户。我不是 100% 确定您通过在用户退出页面之前提交表单来实现什么。假设以下两种情况，可能会给您一个更好的主意。

如果您想防止任何数据丢失，您可以在表单更改时将表单数据保存到本地存储，当用户返回表单时，您可以使用保存的数据预加载表单。这是可靠的。
如果您尝试跟踪用户输入的数据，即使表单被放弃，您可以在表单发生更改时向服务器发送带有表单数据的后台 AJAX 请求。可能会生成一个保存在内存中的唯一 ID，以识别来自同一用户的后续请求。您还可以使用去抖动版本的发送更新来避免服务器泛滥。

再次回答问题，如果浏览器允许您尝试执行的操作，而不是关闭网页，它可以在退出时重定向用户。

【讨论】：

我在页面上有一个计时器。表单应在计时器到达“0”之前提交。当计时器到达 0 时，页面将自动刷新。我还没有添加刷新代码，因为我目前正在测试是否可以在计时器用完并且他们还没有提交时自动提交他们已经输入的内容表格呢。
为什么不在计时器即将到期之前使用 AJAX 请求提交表单数据？

【解决方案2】：

你可以试试吗？

<body onload="document.commentform.submit()">

或者

<body onload="document.forms['commentform'].submit()">

【讨论】：

感谢您的意见，但这并不是我想要的。我希望它无需单击按钮即可自动提交。

【解决方案3】：

确保以下几点：

<textarea> 有文字
<textarea> 有一个 [name]
注册window 到load 活动
在事件处理程序中添加：
```
document.forms[0].submit();
```
将所有脚本包装在一个闭包中
```
function init() {...}
```
调用闭包并添加一个计数器以防止页面初始加载时自动提交。

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
</head>

<body>
  <form method='POST' action='https://ptsv2.com/t/2z703-1622387337/post'>
    <fieldset>
      <legend>Auto Submit on Reload</legend>
      <textarea name='comment'>TEST</textarea><br>
      <button>Submit</button>
    </fieldset>
  </form>
  <script>
    let counter = 0;
    function init(counter) {
      function autoSubmit(e) {
        document.forms[0].submit();
      }
      if (counter > 0) {
        window.onload = autoSubmit;
      } 
      counter++;
     };
     init(counter);
  </script>
</body>

</html>

【讨论】：

我刚试过，但行为很奇怪。该页面在访问时重新加载并重定向到我的搜索页面并搜索具有重新加载的当前页面标题的所有内容....
无法帮助您，因为我不知道 HTML 是什么。顺便说一句，刷新此页面我已经更新了我的答案。
我也试过了，但它的行为相同。它在访问时刷新页面并打开我的搜索表单页面。我没有在有问题的页面上搜索，所以有点奇怪。我还更新了我的问题以显示我目前拥有的表格。