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

Posted 2023-05-08

【中文标题】Django：jQuery触发表单提交onchange of checkbox并保留重新加载时的值

【英文标题】：Django: jQuery to trigger a form submit onchange of checkbox and retain the values on the reload

【发布时间】：2021-03-17 00:48:12

【问题描述】：

当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>

【参考方案1】：

有两种方法可以解决此类问题，通过在 Django 视图中跟踪发布的数据，或者使用 ajax 发送数据到视图，防止 html 页面和表单在每次发送帖子时重新加载。

1.跟踪发布的数据：

在您看来，您应该获取已发布数据中的复选框状态，方法是获取复选框的选中值列表，然后将它们作为上下文数据返回。这取决于您的回复是如何组织的，但为简单起见，我们假设您使用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>

【讨论】：

按照建议使用 ajax 效果很好！谢谢