[FIXED] Django Ajax - Based on first selection set the second select options

Issue

I'm new to ajax and a beginner for django. Currently There is two select input 'MF_name' and 'PD_name'. I need to get PD_name options based on MF_name's selection. This is where I required ajax. I need to use onchange and set the queryset for PD_name.

Can someone provide a simple guide to this? Really appreciate the help thanks!

queryset = Product.objects.only('name').filter(MFID=MFID)

#Html
<div class="container">
    <div class="row">
        <div class="col">
            {% csrf_token %}
            {{mf.MF_name}}
            <!--- This is the element for id_MF_name it is outside of the table. --->
            <!---
            <select name="MF_name" class="form-control w-50" 
            onblur="form_validation({'element' : this,})" 
            required="" id="id_MF_name">
            </select>
            --->
        </div>
    </div>
</div>

<tr id="emptyRow">
    <td colspan="6" style="text-align:center;">Please select a Manufacturing Company first.</td>
</tr>

<tr class="clone_tr displayNone">
    <td>{{ prd.PD_name }}</td>
    <td>{{prd.PDID}}</td>
    <td>{{rtk_prd.qty}}{{rtk_prd.qty.errors}}</td>
    <td>
        <span class="input-group p-0">
            <div class="input-group-text">RM</div>
            {{prd.restock_price}}
        </span>
    </td>
    <td>{{rtk.remark}}</td>
    <td><button type="button" class="btn" onclick="clone_element(this,'.clone_tr','.my-tbody',word)"><i class="fas fa-plus-square fa-lg"></i></button></td>
    <td><button type="button" class="btn" onclick="clone_element(this,'.clone_tr','.my-tbody',word)"><i class="fas fa-plus-square fa-lg"></i></button></td>

#ajax
$('#id_MF_name').on('change', function (e) {
            e.preventDefault();
            var MF_name = $(this).val();
            $.ajax({
                'url': '{% url "Restock:Ajax" %}',
                'data': { 
                    'MF_name' : MF_name,
                    'csrfmiddlewaretoken' : '{{csrf_token}}'
                },
                dataType: 'json',
                success: function (response) {
                    $('#emptyRow').remove();
                    $('.clone_tr').removeClass("displayNone");
                },
            });
        });

#urls.py
path('ajax/', views.updateAjax, name='Ajax'),

#views.py
#this is the part where I wasn't sure what I'm suppose to do after passing the data from ajax to views. 
#Please provide explanation on what I'm suppose to do here to set PD_name options.

def updateAjax(request):
    if request.is_ajax():
        MFID = request.GET.get('MF_name', None)     
        print(MFID)

        context = {

            }

        return render(request, 'Restock/Restock.html', context)

Solution

Credits to Ankit Tiwari and Sangeeth Subramoniam for the helps. For those who curious about how it works you could read this article

Implement Dependent/Chained Dropdown List with Django

Ankit Tiwari solution is also working. So there is two reference for anyone to view as example.

Solution

$('#id_MF_name').on('change', function (e) {
  e.preventDefault();
  var MF_name = $(this).val();
  $.ajax({
    'url': '{% url "Restock:Ajax" %}',
    'type': 'GET',
    'data': {
      'MF_name' : MF_name,
    },
    dataType: 'json',
    success: function (response) {
      console.log(response);
      // do whatever you want
      $('#emptyRow').remove();
      $('.clone_tr').removeClass("displayNone");
    },
    error: function (response) {
      alert(response);
    },

  });
});

and inside your views you've to do like this

def updateAjax(request):
    if request.is_ajax():
        MFID = request.GET.get('MF_name', None)     
        print(MFID)
        queryset = Product.objects.only('name').filter(MFID=MFID)
        response = {
        'data': queryset
        }
        return JsonResponse(response)
    return render(request, 'Restock/Restock.html')

Answered By - Ankit Tiwari