Pass multiple checkbox selections in a template to a form

问题

I'm new to Django and i'm still learning the ropes. I have the following template, that allows the user to select multiple check boxes. Now I'd like for those options to be passed to a new url path after the user pushes a button. If i'm going about this the wrong way let me know and give a suggestion.

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

How would I pass the result of my checkboxes on report_id to a new form and have it pre-populated with these items after hitting my input/submit button.

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

Below is my view and as you'll see I have a lot more grouplists that all use report_id and I want all them to be passed to the form that is generated based on these checkboxes.

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)

回答1:

Here is a way to do it using JavaScript and JQuery AJAX to pass the active checkboxes to a Django backend (using email addresses):

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")

You can add anything to either response, including template rendering; then on the frontend the responses are handled by the respective sections in the ajax command.

来源：https://stackoverflow.com/questions/47243321/pass-multiple-checkbox-selections-in-a-template-to-a-form