CODEWITHSUNDEEP
javascripthtmldjangoajax
donmoy
donmoy

Reputation: 69

Why is my html form not returning values to views.py through ajax?

Here is my html script. Basically, I'm trying to send the values (fruit_id and year_id) from my dropdown menus of the html form when I click the submit button, into the 'get_values' function in my views.py. 

{% load static %}
<html>
 <head>
  <meta http-equiv="Content-Type" content="application/json; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
  <link href="{% static 'main.css' %}" rel="stylesheet" /> 
  <link rel="shortcut icon" href="{% static 'images/favicon.ico' type='image/x-icon' %}">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

 </head>
 <body>
 <div class="s01">
  <form  action="get_values/" method="POST" id="post-form">{% csrf_token %}
    <fieldset>
      <legend>Fruits</legend>
    </fieldset>
    <div class="inner-form">
      <div class="dropdown1">
        <div class="select">
          <select name="dropdown1" id="dropdown1">
            <option value="" disabled selected>Fruit Type</option>
            <option value="1">Mango</option>
            <option value="2">Orange</option>
            <option value="3">Lemon</option>
            <option value="4">Banana</option>
          </select>
        </div>
      </div>
      <div class="dropdown2">
        <div class="select">
          <select name="dropdown2" id="dropdown2">
            <option value="" disabled selected>Harvest year</option>
            <option value="1">2020</option>
            <option value="2">2019</option>
            <option value="3">2018</option>
            <option value="4">2017</option>
          </select>
        </div>
      </div>
      <div class="search">
        <button onclick="buttonclick(); "class="searchbtn" type="submit">Search</button>
      </div>
    </div>
  </form>
</div>
<script type="text/javascript">
var csrftoken = $("[name=csrfmiddlewaretoken]").val();
var g_e = document.getElementById("dropdown1");
var fruit_id = g_e.options[g_e.selectedIndex].value;

var y_e = document.getElementById("dropdown2");
var year_id = y_e.options[y_e.selectedIndex].value;


function sendtoserver(values) {
  $.ajax({
    type: 'POST',
    headers:{
    "X-CSRFToken": csrftoken
    },
    data: {
      fruit_id:values[1],
      year_id:values[2]
      },
    url: '{% url 'get_values' %}',
    success: function(data){
      return (data);
    }

  });
 }

 function buttonclick() {   
   values = [fruit_id, year_id];
   console.log (values)
   sendtoserver(values);
 }

 </script> 
 </body>
</html>

Here is my views.py

from django.shortcuts import render
import os

def index(request):
    return render(request, 'index.html')


def get_values(request):
    if request.method == 'POST':
        fruit_id = request.POST.get('fruit_id')
        year_id = request.POST.get('year_id')
        print(fruit_id)
        print(year_id)
        return render(request, 'filter_function.html')

This is the output in my cmd prompt. Views.py returns None when its supposed to print values from html form

  [10/Jan/2020 15:27:47] "POST /trailer_filter/get_values/ HTTP/1.1" 403 2513
   None
   None

What am I doing wrong?

Upvotes: 0

Views: 44

Answers (1)

Vluuks
Vluuks

Reputation: 34

In your button click handler, you reference fruit_id and year_id, but these variables are most likely initialized when the user has not made a dropdown choice yet, and thus are undefined.

Try requesting the selected dropdown content on submit, not on page render.

Upvotes: 2

Related Questions