[FIXED] Django CSV download with checkbox forms

Issue

Before the actual download, i have some checked entries to be considered, so i only have the checked in the CSV file.

the checked input.

<td><input type="checkbox" name="checked" value="{{ row.CI }}" class="checkboxAll"></td>

if i try using form submit, i get these checked, but then the CSV view "return response" clears the form, so i cant submit twice if needed.

<button type="submit" class="btn " value="csv_download" name="csv_download" onclick="this.form.submit();">
<a class="fa-solid fa-file-csv" style="padding-left: 5px; font-size: 9px;" href="#">&nbsp csv_form</a>            
</button>

if i try using classic CSV-file download using URL, then i do not get these checked because the form is not submitted.

<button type="submit" class="btn ">
<a class="fa-solid fa-file-csv" style="padding-left: 5px; font-size: 9px;" href="{% url 'download_csv' %}?{{request.GET.urlencode}}">&nbsp csv_download</a>
</button>

the view for 1.

def v_base(request):

if request.GET.get('csv_download'):

    print("call csv_download")
    response = download_csv(request)
    return response # if using 1. then the form i cleared and download cant be clicked twice or more

the View.py for 2.

download_csv(request):
    
    checked = request.GET.getlist('checked') # this is not received if using 2.

    db_sel_columns, column = get_column_selected(request)
    rows = Vbase.objects.all().values(*db_sel_columns)
    rows_filter = baseFilter(request.GET, queryset=rows)
    rows_count = rows_filter.qs.count()
 

    response = HttpResponse(content_type='text/csv')
    response['Content-Disposition'] = 'attachment; filename=download.csv'
    writer = csv.writer(response)
    writer.writerow(db_sel_columns) # write header
    for row in rows_filter.qs:
        writer.writerow([row['CI'],row['Description']])

    return response

have anybody an idea to how i come around this?

Solution

html:

<td><input id="checkbox" type="checkbox" name="checked" value="{{ row.CI }}" class="checkboxAll"></td>

<button type="button" id="submit" class="btn">
<a class="fa-solid fa-file-csv" style="padding-left: 5px; font-size: 9px;">&nbsp csv_form</a>            
</button>

add to head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

add to bottom of body:

        <script type="text/javascript">
            //Follow Action 
            $('#submit').click(function(){
            $.ajax({
                    type: "POS",
                    url: "{% url 'download_csv' %}",
                    
                    headers: {
                        'X-CSRFToken': '{{csrf_token}}'
                    },
                    data: {'checkbox': $('#checkbox').prop('checked')},
                    dataType: "json",
                    success: function(response) { 
                       console.log(response)                            
                    },
                    error: function(rs, e) {
                       console.log('error')
                    }
                }); 
        });
        </script> 

view

download_csv(request):
    
    checked = request.GET.get('checkbox')
    print(checked, '*'*10)
    db_sel_columns, column = get_column_selected(request)
    rows = Vbase.objects.all().values(*db_sel_columns)
    rows_filter = baseFilter(request.GET, queryset=rows)
    rows_count = rows_filter.qs.count()
 

    response = HttpResponse(content_type='text/csv')
    response['Content-Disposition'] = 'attachment; filename=download.csv'
    writer = csv.writer(response)
    writer.writerow(db_sel_columns) # write header
    for row in rows_filter.qs:
        writer.writerow([row['CI'],row['Description']])

    return response

Answered By - enes islam