Как разместить форму с Django, а не перезагрузить страницу

Question

Я работаю над приложением, в котором пользователь отправит значение, и я хочу скрыть div, содержащий форму, при отправке и отобразить div, содержащий результаты.Цель состоит в том, чтобы они отправили форму и отобразили другой скрытый элемент div.Что я делаю не так с кодом Django или Javascript?

views.py

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})

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
]

models.py

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)

forms.py

from django import forms

from .models import VintageMac

class VintageMacForm(forms.ModelForm):
    class Meta:
        model = VintageMac
        fields = ('price',)

HTML

<div id="submission1">
                    <p class="card-text">Some quick example text to build on the card title.</p>
                    <div class="bottom">
                      <div class="row">
                        <form action="/create_post/" class="w-100" method="POST" id="form1">
                          <div class="col-12">
                            {% csrf_token %}
                              {% for hidden_field in form.hidden_fields %}
                                {{ hidden_field }}
                              {% endfor %}
                            {% for field in form.visible_fields %}
                              <div class="form-control">
                                  {% render_field field min="0" class="form-control" id="amount1" placeholder="Type an amount." %}
                                  {% if field.help_text %}
                                <small class="form-text text-muted">{{ field.help_text }}</small>
                                {% endif %}
                              </div>
                            {% endfor %}
                          </div>
                          <div class="col-12">
                            <button onclick="myFunction1()" class="mt-1 text-center form-control btn submit-btn">Submit <span>?</span></button>
                          </div>
                        </form>
                      <div class="text-center credit mt-2 w-100">Submitted by @peterdenatale</div>
                      </div>
                    </div></div>
                    <div id="results1">
                      <p class="card-text">You said that you would pay <span class="value">$375.00</span> .</p>
                      <div class="bottom">
                          <div class="row">
                              <div class="col-12">
                                  <div class="progress">

                                    <div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
                                    </div>
                                  </div>
                                  <div class="row" style="margin-bottom: -20px;">
                                    <p class="col-4 raised-text"><strong>Min<br>$0.00</strong></p>
                                    <p class="col-4 average-text"><strong>Avg<br>$250.00</strong></p>
                                    <p class="col-4 goal-text"><strong>Max<br>$500.00</strong></p>
                                  </div>
                              </div>
                            </div>
                      </div>
                    </div>

JavaScript

$(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);
    }
});

Я пытался изменить JavaScript на кучу разных вещей, ноединственное, что он делает, это перезагрузить страницу.Я хочу избавиться от перезагрузки и остаться на той же странице, но по-прежнему размещать данные и скрывать / показывать div.

Answer 1

1- Я думаю, что вы забыли закрыть тег javascript, поэтому он не работает.
2- Измените кнопку отправки на следующую:

<input type="submit" class="mt-1 text-center form-control btn submit-btn" value="Submit"><span>?</span></div>

3- Вы забылидобавьте токен csrf в ajax, он должен выглядеть следующим образом:

csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),

Cheers:)

Answer 2

В строке:

<button onclick="myFunction1()" class="mt-1 text-center form-control btn submit-btn">Submit <span>?</span></button>

Удалите обработчик onclick, добавьте атрибут type со значением submit.

Обновленная строка должна выглядеть следующим образом:

<button type="submit" class="mt-1 text-center form-control btn submit-btn">Submit <span>?</span></button>

И обновите ключ url в объекте опций $.ajax до /create_post/ (из атрибута form tag action)