Django: request.POST.get() возвращает NoneType

Я работаю с данными, полученными из html-формы.

В настоящее время мне не удается получить данные на стороне сервера. Каждый ввод возвращает "NoneType" на сервере.

Мне кажется, что я перепробовал все, что смог найти здесь, в частности, заменил id на name в html-форме, но ничего не помогает.

вот что я получил на данный момент:

views.py:

def quadriatransport_simulationView(request):
  return render(request, "simulation.html")


@csrf_exempt
def compute(request):
  destination = request.POST.get("destination")
  nombre_de_palettes = request.POST.get("nombre_de_palettes")
  poids_par_palette = request.POST.get("poids_par_palette")
  Optimisation_prix = request.POST.get("Optimisation_prix")
  Optimisation_delai = request.POST.get("Optimisation_delai")
  result = {"destination":destination}
  print(result)
    
  return JsonResponse({"operation_result": result})

results возвращает словарь, где destination - это None

Теперь вот что я смог сделать на веб-странице

    <form method="POST">
    {% csrf_token %}

    <label><h3>Input variables to calculate EOQ:</h3></label>
    <br>
    <br>


    <span>Destination (departement) <input type="text" id="destination">
    <br>
    <br>
    <span>Nombre de palettes <input type="text" id="nombre_de_palettes">
    <br>
    <br>
    <span>Poids par palette <input type="text" id="poids_par_palette">
    <br>
    <br>
    <span>Optimiser prix <input type="checkbox" id="Optimisation_prix">
     <br>
     <br>
     <span>Optimiser délai de livraion <input type="checkbox" id="Optimisation_delai">
      <br>
     
    

    <input id="ajax-call" type="submit" value="Simuler">

</form>
            <p id="ajax"></p>

и вот мой js скрипт внутри веб-страницы

       <script>
document.querySelector("#ajax-call").addEventListener("click", event => {
    event.preventDefault();
    let formData = new FormData();
    formData.append('estination', document.querySelector("#destination").value);
    formData.append('nombre_de_palettes', document.querySelector("#nombre_de_palettes").value);
    formData.append('poids_par_palette', document.querySelector("#poids_par_palette").value);
    formData.append('Optimisation_prix', document.querySelector("#Optimisation_prix").value);
    formData.append('Optimisation_delai', document.querySelector("#Optimisation_delai").value);
 
    let csrfTokenValue = document.querySelector('[name=csrfmiddlewaretoken]').value;
    const request = new Request('{% url "compute" %}', {
        method: 'POST',
        body: formData,
        headers: {'X-CSRFToken': csrfTokenValue}
    });
    fetch(request)
        .then(response => response.json())
        .then(result => {
            const resultElement = document.querySelector("#ajax");
            resultElement.innerHTML = result["operation_result"];
        })
})
</script>

Не уверен, что здесь что-то не так, я успешно использовал ту же структуру для других проектов, и она работала. Я бьюсь над этим часами и не могу понять, что происходит. Надеюсь, кто-нибудь сможет понять, где я напортачил!

formData.append('destination', document.querySelector("#destination").value);