Django с Javascript форма не возвращается в View

Я пытаюсь изучить Javascript, разрабатывая интерактивную форму в Django. Форма представляет список Select, который позволяет выбирать несколько тестов. По мере выбора одного или нескольких тестов в списке Javascript обновляет список на странице с текущими выборами. Когда я нажимаю Submit, я ожидаю возврата к представлению, но вместо этого я получаю 405 Error и не попадаю на URL-адрес успеха. Я добавил оператор Print в метод form_valid в представлении, но он не выполняется. Не знаю, как добиться желаемого результата.

views.py
class OrderTestsViewForJS(ListView):
    model = Universal_Test_File
    context_object_name = "testlist"
    success_url = '/list-patient/'
    template_name = "lab/order_tests_js.html"

    def get_context_data(self, *args, **kwargs):
        patient = get_object_or_404(Patient, pk=self.kwargs['pk'])
        context = super(OrderTestsViewForJS, self).get_context_data(**kwargs)
        context['patient'] = patient
        return context

    def form_valid(self, form):

        print("in form valid")
        return super().form_valid(form)

stripped down template.html
{% extends 'base.html' %}
{% block title %}Order Tests{% endblock title %}
{%load static%}
{% block content  %}


 
<div class="card mt-5 ">
    <div class="card-header text-center">
      NovaDev Order Tests Module
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-3 m-5"> 
            <form action="" method="post">
                {% csrf_token %}
                <select id="select_tests" name="select_tests" multiple >
                {% for test in testlist %}
                   <option value = "{{test.service_id}}" > {{test.test_name}}</option>
                {%endfor%}    
                </select>   
                <div class="row">
                    <div class="col m-5">        
                    <input id="done" type="submit"/>
                </div>
                </div>    
            </form>
            
        </div> 
        <div class="col-6"> 
            <p class= mt-5>Select one or more tests using Shift and Control (Command on a Mac)</p>
            <p class= mt-5>Orders will NOT be saved in this DEMO portfolio system</p>
            <p id="orderedtestlist">Tests Ordered</p>
            <p></p>
        </div>
    </div>
     
    </div>
</div> 

{% endblock content  %}

javascript
"use strict";

const $ = selector => document.querySelector(selector);

document.addEventListener("DOMContentLoaded", () => {
    $("#select_tests").addEventListener("change", () => {
        const orders = $("#select_tests").selectedOptions;

        let test_ary = []
        for (var i = 0; i < orders.length; i++) {
            test_ary[test_ary.length] = orders[i];
            displayTests(test_ary);
        }

        // test_ary now has only the selected test numbers
        //console.log(test_ary)
        // for test name
        //text = document.createTextNode(orders[i].text);

    });

    $("#done").addEventListener("click", () => {

        $("#done").submit();
    });
});

const displayTests = lst => {

    const ul = document.createElement("ul");
    ul.classList.add("testlist"); // a css class for formatting

    // create a li tag for each test selected and add to ul
    for (let test of lst) {
        const li = document.createElement("li");
        const txt = document.createTextNode(test.text);
        // you have the test number in test.value if needed
        li.appendChild(txt);
        ul.appendChild(li);
        console.log(txt)
    }

    // if no ul element yet, add it. otherwise replace it.
    const parent = $("#orderedtestlist");
    const nodeul = $("#orderedtestlist ul");
    //const node = parent.nodeul;
    if (nodeul == null) {
        console.log(parent)
        parent.appendChild(ul);
    } else {
        //console.log(node)
        nodeul.parentNode.replaceChild(ul, nodeul);
    }

}

Итак, Javascript работает отлично - строит UL при каждом изменении выбора и отображает его. Когда вы нажимаете submit, идея заключается в том, что вы вернетесь в View, а View посмотрит на данные формы и, если они верны, вернется к url успеха. Однако возврата к представлению не происходит. JS предназначен только для отображения. Я хочу, чтобы Django обрабатывал данные формы так, как если бы JS там не было.

Вернуться на верх