尝试使用 javascript 激活一次时，如何防止递归激活表单提交按钮？

Question

我正在创建一个基于表单从数据库中检索数据的 Django 应用程序。该表格只是清单的集合。然后使用数据使用 Bokeh 创建绘图。

该应用程序有效。也就是说，当提交按钮被按下时，应用程序接受用户输入，收集相关数据并绘制图表。我的问题是我想在页面加载后立即提交一次表单，以便显示具有默认设置的图表。当前行为是在用户按下提交按钮之前不显示任何图形。

这是一个抽象示例，有点重现了我的问题。请注意，这个例子并没有完全重现我的问题，因为我对 html/javascript 缺乏经验，因此很难使 html/javascript 等同于 Django 正在做的事情。然而，这是一个尝试。请记住，按下按钮时应动态生成图表 - 显示哪个图表取决于用户输入。

<div id='form-container'>
  <form action='.' name='ctrl-panel' method='post' class='form-check-inline'>
    <ul>
      <li>
        <label id="label1">
        <input id='label1' type='checkbox' name='checkbox1' value='A' checked='checked'>Checkbox 1
      </label>
      </li>

      <li>
        <label id="label2">
        <input id='label2' type='checkbox' name='checkbox2' value='A'>Checkbox 2
      </label>
      </li>
    </ul>

  </form>

  <input type="submit" value="Submit" class="btn" id="submit-btn" form="ctrl-panel">

</div>

<script>
  window.onload = function clickBtnOnWindowLoad() {
    var btn = document.getElementById('submit-btn');
    btn.click();
  }
</script>

问题是表单上的 action 设置为当前页面 . 并且 javascript 代码在页面加载时运行。因此，我得到提交按钮的递归激活，因为提交按钮加载当前页面并加载当前页面按下提交按钮。

有没有人有任何建议，以便我可以在页面加载时使用默认设置提交一次表单，并且只提交一次。

Answer 1

您不能使用 window onload，因为该函数将在页面加载时运行。

如果你仍然想保持这种方式，你可以像这样做一个 if 语句：

var x = 0:  
If x == 0  //when page is loaded
  DO NOTHING  
  x = x + 1
else if x > 0  //because the page is loaded and x is now 1
  DO THE CODE WHEN CLICKING BUTTON

Disclaimer currently programming in python and its been a while since i used javascript so formatting may not be optimal, this is just an example

Answer 2

我离Django比较远，不过逻辑上有两种方法可以解决这个问题：

从后端检测页面是否第一次加载（没有请求任何数据）。如果是 - 使用脚本呈现表单，否则不呈现表单；
将 POST 更改为 GET，这样所有提交的值都将附加到 URL 的查询字符串中。然后，如果 URL 中有任何查询（可以用 location.search 检测到，请不要运行脚本：

（像这样）

<script>
    window.onload = function clickBtnOnWindowLoad() {
        var btn = document.getElementById('submit-btn');
        if (!location.search)
            btn.click()
    }
</script>

但一般来说，如果您希望始终在用户输入可靠数据的情况下呈现表单，那么您的方法就不是那么好。我想，你应该考虑使用 AJAX request.

尝试使用 javascript 激活一次时，如何防止递归激活表单提交按钮？

How to prevent recursive activation of form submit button when trying to activate once using javascript?

html

javascript

django

click