Django：jQuery 触发表单提交 onchange 复选框并保留重新加载时的值

Question

当 hostform 中的一个或多个复选框被选中时，我想触发表单提交。这是使用下面的代码成功触发的。但是，页面会在提交表单时重新加载，使任何选中的框立即恢复为未选中状态。我以为 localStorage.input 行可以解决这个问题，但显然不是。

有什么建议吗？

HTML:

<div class="container-lg">

      <!-- section for checkboxes -->
      <div class="row justify-content-center">
        <div class="col-6">
          <h2>Host</h2>
          <form id="hostform" class="form-inline" role="form" action="" method="post">
            {% csrf_token %}
            <input type="checkbox" class="form-control" id="one" name="hm" value="one" onchange="triggerPost('one')">
            <label for="one">One</label>
            <br>
            <input type="checkbox" class="form-control" id="two" name="hm" value="two" onchange="triggerPost('two')">
            <label for="two">Two</label>
            <br>

          </form>

        </div>

     ....
     </div>

jQuery:

<script>
  function triggerPost(idnum) {
    
    $('#hostform').on("submit", function () {
      localStorage.input = $("#"+idnum).checked;
    });
    $('#hostform').submit()
  };
</script>

Answer 1

有两种方法可以解决此类问题，通过在 Django 视图中跟踪 posted 数据，或者使用 ajax 将数据发送到视图，防止 html 页面，因此每次发送 post 时都会重新加载。

1.跟踪 posted 数据：

在您看来，您应该在 posted 数据中获取复选框状态，方法是获取复选框的选中值列表，然后 return 它们作为上下文数据。这取决于您的响应是如何组织的，但为简单起见，我们假设您使用 TemplateResponse:

return TemplateResponse(request, 'your.html',{'checked_hms':request.POST.getlist('hm')})

比起你的 html 你应该使用条件来检查 checked_hms 中是否存在值，并根据添加 checked 值到你的复选框输入，像这样：

...
<input type="checkbox" class="form-control" id="one" name="hm" value="one" {% if 'one' in checked_hms %}checked{% endif %} onchange="triggerPost()">
<label for="one">One</label>
<br>
<input type="checkbox" class="form-control" id="two" name="hm" value="two" {% if 'two' in checked_hms %}checked{% endif %} onchange="triggerPost()">
<label for="two">Two</label>
...

2。使用 ajax:

您可以使用 ajax 调用将表单数据作为 post 发送，这不会重新加载表单，从而保持复选框状态完整，如下所示：

<script>
    function triggerPost() {
        $.ajax({
            type: "POST",
            url: $('#hostform').attr('action'),
            data: $('#hostform').serialize()
        });
    };
</script>

Django：jQuery 触发表单提交 onchange 复选框并保留重新加载时的值

Django: jQuery to trigger a form submit onchange of checkbox and retain the values on the reload

html

javascript

django

checkbox

jquery