In order to achieve my project goals, I am looking to implement a form submission using Ajax without any page refreshing. The Post model I am working with contains three fields: animal, image, and description.
class Post(models.Model):
# Animal choices
Here is the form.py code snippet
class PostForm(ModelForm):
# Form Meta data
Here is a snapshot of the views page code
def homePage(request):
# Post form handling logic
The issue I am facing seems to be with the JavaScript code used for form submission. While I can successfully submit the form, the 'data:{...}' section in my JavaScript code may be incorrect. I suspect an error on line 651 in the code snippet below.
View the AJAX JavaScript code snippet
// JavaScript code snippet
$(document).on('submit','#post-form',function(e){
// Ajax form submission logic
});
I am struggling to set the correct value in the JavaScript code snippet and my backend admin site shows empty posts in the database. I have attempted various approaches like $("form.model.animal").val() and $("form").val(animal) without success.
Check out my backend admin page with 'successful' submissions below for reference.
Here is the template for the form field:
const postpopup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat([lt, lg])
.setHTML(
`<h1>Yellowmap :) Post Forum</h1>
<div style="margin-left: 40px;">
<form id="post-form">
{% csrf_token %}
{{form}}
<input type="submit"/>
</form>
<p></p>
</div>`
)