将模板中的多个复选框选择传递给表单

Question

我是 Django 新手，我仍在学习中。我有以下模板，允许用户选择多个复选框。现在，我希望在用户按下按钮后将这些选项传递给新的 url 路径。如果我以错误的方式解决这个问题，请告诉我并提出建议。

<div class="container">

          <div class="row">
              <div class="col">
                <h3>Financial</h3>

                        <ul>
                        {% for app in fingrouplist %}
                        <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                        {% endfor %}
                        </ul>
              </div>
              <div class="col">

我如何将我在 report_id 上的复选框的结果传递给一个新表单，并在点击我的输入/提交按钮后预先填充这些项目。

</br></br>
<input class="btn btn-primary" type="button" value="Request Access">

下面是我的观点，正如您将看到的，我有更多的组列表都使用 report_id，我希望将它们全部传递给基于这些复选框生成的表单。

def profile(request):
    owner = User.objects.get (formattedusername=request.user.formattedusername)
    reportdetail = QVReportAccess.objects.filter(ntname = owner.formattedusername, active = 1).values('report_name_sc')

    reportIds = QVReportAccess.objects.filter(ntname = owner.formattedusername).values_list('report_id', flat=True)
    reportaccess = QvReportList.objects.filter(report_id__in= reportIds).values_list('report_name_sc', flat = True)
    reportGroups = QVReportAccess.objects.filter(ntname = owner.formattedusername).values_list('report_group_id', flat=True)
    reportlist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).exclude(active=0)
    allreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 100)
    bhreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 200)
    cereportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 500)
    finreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 600)
    careportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 800)
    pireportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 1100)
    screportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 1200)
    dssreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 1300)
    psgreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 1400)
    othreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 99999)


    print(reportdetail)

    args = {'user':owner, 'applicationaccess':reportaccess, 'applicationlist':reportlist, 'bhgrouplist':bhreportgrouplist, 'cegrouplist':cereportgrouplist, 'fingrouplist':finreportgrouplist
          , 'cagrouplist':careportgrouplist, 'pigrouplist':pireportgrouplist, 'scgrouplist':screportgrouplist, 'dssgrouplist':dssreportgrouplist, 'psggrouplist':psgreportgrouplist
          , 'othgrouplist':othreportgrouplist, 'allgrouplist':allreportgrouplist}

    return render(request, 'accounts/profile.html', args)

Answer 1

这是一种使用 JavaScript 和 JQuery AJAX 将活动复选框传递给 Django 后端（使用电子邮件地址）的方法：

HTML：

{% for address in address_book %}
    <div id="address_row_{{ address }}" class="address"
         onclick="$(this).toggleClass('selected')>
        {{ address }}
    </div> {# YOU CAN CHANGE THESE TO CHECKBOXES OR WHATEVER #}
{% endfor %}

function sendEmails() { // REQUIRES A BUTTON OR TRIGGER
    let addresses = [];
    $('.address').each( function () {
        if ($(this).hasClass('selected')) {
            addresses.push(this.id.split('_')[2]);
        }
    });

    $.ajax({
        type: "POST",
        url: "{% url ' ... ' %}",
        data: {'addresses': JSON.stringify(addresses)},
        success: function (serverResponse_data) {
            console.log('sendEmails success: ' + serverResponse_data);
        },  
        error: function (serverResponse_data) {
                    console.log('error:' + JSON.stringify(serverResponse_data).split(',').join('\n'));
        }
   });

views.py：

def ajax_email_to(request):
    if not request.is_ajax():
        return HttpResponse('SERVER RESPONSE ajax_email_to, Not an ajax call.')

str_addresses = request.POST.get("addresses", "missing")  # THIS HAS TO MATCH THE DICT KEY IN YOUR FRONT

if str_addresses != 'missing':

    # DO YOU STUFF
    
    return HttpResponse("SERVER RESPONSE SUCCESS")

return HttpResponse("SERVER RESPONSE ERROR")

您可以向任一响应添加任何内容，包括模板渲染；然后在前端，响应由 ajax 命令中的各个部分处理。