Интеграция новых карт Google Автозаполнение API в проект Django ⇐ Javascript

[Anonymous]

Я использую новую функцию API Google PlateAutoCocleteElement () (не устаревший Google.maps.Places.AutoCOMPLATE ) и хотел бы помочь интегрировать его в свой проект DJango. initmap () Функция JavaScript в форме несколькими способами, обновляя все соответствующие файлы ниже, но представление формы всегда терпит неудачу, и данные никогда не достигают базы данных. /> models.py

Код: Выделить всё

class Applicant(models.Model):
Name = models.CharField(max_length=101)
DOB = models.DateField()
High_School = models.CharField(max_length=100)
Major = models.CharField(max_length=100)
SSN = models.CharField(max_length=11)
Phone = models.CharField(max_length=15)

def __str__(self):
return self.Name

views.py

Код: Выделить всё

def application_page(request):
form = ApplicationForm()
return render(request, "DunesApp/application.html", {
'form': form,
'google_maps_key': settings.GOOGLE_MAPS_API_KEY
})

def submit_application(request):
if request.method == "POST":
form = ApplicationForm(request.POST)
if form.is_valid():
form.save()
return JsonResponse({"status": "success"})
return JsonResponse({"status": "error"})

forms.py

Код: Выделить всё

class ApplicationForm(forms.ModelForm):
class Meta:
model = Applicant
fields = "__all__"

script.js (называется Inside mayout.html)

Код: Выделить всё

function submitApplication() {
const form = document.getElementById('application-form');
const formData = new FormData(form);

fetch('/submit_application/', {
method: 'POST',
body: formData,
headers: {
'X-CSRFToken': formData.get('csrfmiddlewaretoken')
}
})
.then(response => response.json())
.then(data => {
const messageBox = document.getElementById('application-message');

if (data.status === 'success') {
messageBox.className = 'alert alert-success mt-3';
messageBox.innerText = 'Application submitted successfully!';
messageBox.classList.remove('d-none');
form.reset();
} else {
messageBox.className = 'alert alert-danger mt-3';
messageBox.innerText = 'Submission failed. Please try again.';
messageBox.classList.remove('d-none');
}
})
.catch(error => {
const messageBox = document.getElementById('application-message');
messageBox.className = 'alert alert-danger mt-3';
messageBox.innerText = 'An error occurred.  Please try again.';
messageBox.classList.remove('d-none');
console.error('Error:', error);
});
}

application.html> ./p>

Код: Выделить всё

{% extends 'DunesApp/layout.html' %}
{% load form_tags %}
{% block content %}
Student Application Form


{% csrf_token %}


Full Name:
{{ form.Name|add_class:'form-control' }}

Date of Birth:
{{ form.DOB|add_class:'form-control' }}

Social Security Number:
{{ form.SSN|add_class:'form-control' }}



Phone Number:
{{ form.Phone|add_class:'form-control' }}

High School:
{{ form.High_School|add_class:'form-control' }}

Intended Major:
{{ form.Major|add_class:'form-select' }}

Submit Application

желаемый дизайн


Подробнее здесь: https://stackoverflow.com/questions/796 ... go-project