django: request.POST.get() returns NoneType

Question

I am work from data acquired from an html form.

I am currently failing to capture the data on the server side. Every input returns "NoneType" on the server.

I feel like I tried everything that I could find around here, notably changing id for name in the html form, nothing works.

here is what I got so far:

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 returns a dictionnary where destination is None

now here is what I have been able to do on the webpage

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

and here is my js script inside of the webpage

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

Not sure what is wrong with this, I have successfully used the same structure for other projects and it worked. I have been struggling with it for hours that I can't see straight. Hopefully someone can see where I messed up!

Answer 1

您在 formData 中拼错了目的地

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