title: How to POST a form with Django and not reload the page
body: <p>I'm working on an app where the user will submit a value and I want to hide the div containing the form on submit and display a div containing the results. The goal is to have them submit the form and display a different hidden div. What am I doing wrong with either the Django code or Javascript?</p>
  
  <p>views.py</p>
  
  <pre><code>from django.shortcuts import render
  from .models import VintageMac
  from .forms import VintageMacForm
  
  def home(request):
      if request.method == "POST":
          form = VintageMacForm(request.POST)
          if form.is_valid():
              form.save()
              form = VintageMacForm()
      else:
          form = VintageMacForm()
      return render(request, 'hmwypapp/index.html', {'form': form})
  </code></pre>
  
  <p>urls.py</p>
  
  <pre><code>from django.urls import path
  from . import views
  
  urlpatterns = [
      path('', views.home, name='home'),
  ]
  </code></pre>
  
  <p>models.py</p>
  
  <pre><code>from django.conf import settings
  from django.db import models
  from django.utils import timezone
  from django import forms
  
  class VintageMac(models.Model):
      price = models.IntegerField()
  
      def publish(self):
          self.save()
  
      def __str__(self):
          return '%s' % (self.price)
  </code></pre>
  
  <p>forms.py</p>
  
  <pre><code>from django import forms
  
  from .models import VintageMac
  
  class VintageMacForm(forms.ModelForm):
      class Meta:
          model = VintageMac
          fields = ('price',)
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="submission1"&gt;
                      &lt;p class="card-text"&gt;Some quick example text to build on the card title.&lt;/p&gt;
                      &lt;div class="bottom"&gt;
                        &lt;div class="row"&gt;
                          &lt;form action="/create_post/" class="w-100" method="POST" id="form1"&gt;
                            &lt;div class="col-12"&gt;
                              {% csrf_token %}
                                {% for hidden_field in form.hidden_fields %}
                                  {{ hidden_field }}
                                {% endfor %}
                              {% for field in form.visible_fields %}
                                &lt;div class="form-control"&gt;
                                    {% render_field field min="0" class="form-control" id="amount1" placeholder="Type an amount." %}
                                    {% if field.help_text %}
                                  &lt;small class="form-text text-muted"&gt;{{ field.help_text }}&lt;/small&gt;
                                  {% endif %}
                                &lt;/div&gt;
                              {% endfor %}
                            &lt;/div&gt;
                            &lt;div class="col-12"&gt;
                              &lt;button onclick="myFunction1()" class="mt-1 text-center form-control btn submit-btn"&gt;Submit &lt;span&gt;&lt;/span&gt;&lt;/button&gt;
                            &lt;/div&gt;
                          &lt;/form&gt;
                        &lt;div class="text-center credit mt-2 w-100"&gt;Submitted by @peterdenatale&lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;&lt;/div&gt;
                      &lt;div id="results1"&gt;
                        &lt;p class="card-text"&gt;You said that you would pay &lt;span class="value"&gt;$375.00&lt;/span&gt; .&lt;/p&gt;
                        &lt;div class="bottom"&gt;
                            &lt;div class="row"&gt;
                                &lt;div class="col-12"&gt;
                                    &lt;div class="progress"&gt;
  
                                      &lt;div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"&gt;
                                      &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;div class="row" style="margin-bottom: -20px;"&gt;
                                      &lt;p class="col-4 raised-text"&gt;&lt;strong&gt;Min&lt;br&gt;$0.00&lt;/strong&gt;&lt;/p&gt;
                                      &lt;p class="col-4 average-text"&gt;&lt;strong&gt;Avg&lt;br&gt;$250.00&lt;/strong&gt;&lt;/p&gt;
                                      &lt;p class="col-4 goal-text"&gt;&lt;strong&gt;Max&lt;br&gt;$500.00&lt;/strong&gt;&lt;/p&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript </p>
  
  <pre><code>$(document).on('submit','#form1',function(e){
  e.preventDefault();
  
  $.ajax({
      type:'POST',
      url: '',
      data:{
          amount: $('#amount1').val(),
      },
      success:function(){
          $('#submission1').fadeOut(500);
          $('#results1').delay(500).fadeIn(500);
      }
  });
  </code></pre>
  
  <p>I tried changing the JavaScript to a bunch of different things, but the only thing that it does it reload the page. I want to get rid of the reload and stay on the same page but still post the data and hide/show the divs.</p>