Получить значения полей формы с Ajax in Django

Question

У меня есть две формы. Первая форма - CreateQuoteForm, которая используется для создания объекта Quote - пользователь заполняет его первым. 2-ая ​​форма - CreateProformaForm, которая используется для создания объекта Proforma, это будет выполнено вторым. Я бы хотел, чтобы у пользователя была возможность выбрать объект Quote из поля выбора и, нажав кнопку, заполнить поля CreateProformaForm данными, в которых есть перекрытие между двумя моделями. Пожалуйста, смотрите ниже для дальнейшей иллюстрации:

models.py

class Quote(models.Model):
    Name = models.CharField(max_length=30, null=True, blank=True)
    Shipment = models.ForeignKey(Shipment, null=True)
    Exporter = models.CharField(max_length=100, null=True, blank=True)
    QuoteNo = models.CharField(max_length=30, null=True, blank=True)

class Proforma(models.Model):
    Name = models.CharField(max_length=30, null=True, blank=True)
    Shipment = models.ForeignKey(Shipment, null=True)
    Exporter = models.CharField(max_length=100, null=True, blank=True)
    QuoteNo = models.CharField(max_length=30, null=True, blank=True)
    Date = models.CharField(max_length=30, null=True, blank=True)
    Consignee = models.ForeignKey(Customer, null=True)

Как вы можете видеть, модели имеют аналогичные поля. Поэтому после выбора Цитаты в поле выбора поля Имя, Отгрузка, Экспортер, Цитата № должны заполняться в CreateProformaForm, а Данные и Грузополучатель остаются пустыми. Также, чтобы быть ясным - это должна быть опция только для этого пользователя, форма должна быть инициализирована пустой. Я уверен, что для этого потребуется AJAX, но у меня нет полного представления о том, как реализовать AJAX в Django ... Может кто-нибудь помочь мне с отправной точкой, которую я могу использовать в качестве справочного Я перехожу через это требование и другие, как это для этого проекта?

forms.py

class QuoteForm(forms.ModelForm):
    class Meta:
        model = Quote
        fields = [
        'Name', 'Shipment', 'Exporter', 'QuoteNo']

class ProformaForm(forms.ModelForm):
    class Meta:
        model = Proforma
        fields = [
        'Name', 'Shipment', 'Exporter', 'QuoteNo', 'Date', 'Consignee']


views.py 
#view to create the Proforma 
@login_required(login_url="/login")
def ProformaView(request, pk):
    if request.method == "POST":
        form = ProformaForm(request.POST)
        if form.is_valid():

            new_proforma = form.save()


            #do a bunch of stuff


                messages.success(request, "Success: Proforma Has Been Created!")
                return redirect('HomeView')

    form = ProformaForm()
    quotes = Quote.objects.all()
    context = {
        'quotes': quotes,
        'form': form,
    }

    return render(request, 'proforma.html', context)

Проформа. html

<div class="doc-header">

  <select id="quotes"> <!---where the user should select the quote object--->
    {% for item in quotes %}
      <option>{{item}}</option>
    {% endfor %}
  </select>

  <button id="populate"> Populate </button> <!---button which should trigger ajax-->

</div>

<div id="document_div">
  <form id="proformaform" method="POST">
      {% csrf_token %}
    <div id="table">
      <div id="header">
        <h3>PROFORMA INVOICE</h3>
      </div>
      <div>
        {{form.Shipment}}
        {{form.Name|as_crispy_field}}
      </div>

    <table class="table2" width=100%>
      <tr class="bigrow">
        <td rowspan = 2 >Exporter: {{form.Exporter}}</td>
        <td colspan = 2 >Pages:</td>
      </tr>
      <tr>
        <td width = 25%>
          Quote #: {{form.QuoteNo}}
        </td>
        <td width = 25%>
          Date: {{form.Date}}
        </td>
      </tr>
      <tr>
        <td>Buyer: {{form.Consignee}}</td>
        <td colspan = 2 height=175></td>
      </tr>
    </table>
  </form>
</div>