title: Using Ajax to receive total amount due before submitting to database
body: <p>Trying to use Ajax to calculate and display the sum before I submit anything to the database. At the moment this is what I have, but I can't seem to get anything to display. I'm trying to start small and see if I'm even able to display the values in the fields.. Is my view for final_price wrong? Or did I mess up somewhere in the Jquery? I'm still new to Ajax, so I'm not sure where I went wrong (following tutorials)</p>
  
  <pre><code>Book Price:      $10  (input field)
  Delivery charge: $3   (input field)
  Delivery type:   $5   (input field)
  
  [calculate] [submit]
  
  Final Result:    $18  (result of adding the fields above when user clicks the calculate button)
  
  calculate button will display $18
  submit button will finalize the results and send the values to the database.
  </code></pre>
  
  <p>This is my model for the table</p>
  
  <pre><code>class book(models.Model):
      user = models.ForeignKey(
          settings.AUTH_USER_MODEL,
          on_delete=models.CASCADE,
      )
      book_price = models.IntegerField()
      delivery_charge = models.IntegerField()
      delivery_type = models.IntegerField()
      final_result = models.IntegerField()
  
      def save(self, *args, **kwargs):
         self.final_result = self.book_price + self.delivery_charge + self.delivery_type
         print(self.final_result)
      super(book, self).save(*args, **kwargs)
  </code></pre>
  
  <p>views.py for the form</p>
  
  <pre><code>def final_price(request):
      response_data = {}
      if request.method == 'POST':
          form = RequestForm(request.POST)
          book_price = request.POST.get('book_price')
          delivery_charge = request.POST.get('delivery_charge')
          delivery_type = request.POST.get('delivery_type')
  
          response_data['book_price'] = book_price
          response_data['delivery_charge'] = delivery_charge
          response_data['delivery_type'] = delivery_type
  
          book.objects.create(book_price=book_price, delivery_charge=delivery_charge,delivery_type=delivery_type)
          return JsonResponse(response_data)
          if form.is_valid():
              instance = form.save(commit=False)
              instance.user = request.user
              instance.save()
              return redirect('final_price')
      else:
          form = RequestForm()
          args = {'form': form}
          return render(request, 'final_price.html', args)
  </code></pre>
  
  <p>Model for to allow me to edit the fields in my book module</p>
  
  <pre><code>class RequestForm(forms.ModelForm):
      class Meta:
          model = book
          fields = (
          'book_price',
          'delivery_charge',
          'delivery_type',
          )
  </code></pre>
  
  <p>Html file</p>
  
  <pre><code>{% extends 'base.html' %}
  
  {% block content %}    
    &lt;form class="post" method="post"&gt;
      {% csrf_token %}
      {{ form.as_p }}
      &lt;button type="submit" name="button"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;button onclick="myFunction()"&gt;Get Quote&lt;/button&gt;
    &lt;script type="text/javascript"&gt;
      function myFunction(){
        $('.ajaxProgress').show();
        $.ajax({
          type: "POST",
          url: "/final_price",
          dataType: "json",
          async: true,
          data:{
            csrfmiddlewaretoken: '{{ csrf_token }}',
            book_p: $('#book_price').val(),
          },
          success: function(json){
            $('#output').html(json.message);
            $(.ajaxProgress).hide();
          }
        });
      }
    &lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>urls.py</p>
  
  <pre><code>urlpatterns = [
      path('', views.home, name='home'),
      path('final_price/', views.final_price, name='final_price'),
  ]
  </code></pre>