how to save bootstrap modal form upon submit in django? - django

Question

I'm new to ajax and I need help. I was able to open the modal when I clicked the Add grade, now my problem is how to save the form to the database using modal? that error page will show if I hit the save changes in modal form.
views.py
class GradeUpdateView(LoginRequiredMixin, UpdateView):
model = Subject
template_name = 'teacher/modal.html'
# fields = ['grade']
# success_url = '/'
form_class = UpdateGradeForm
def get_success_url(self):
subject = self.object.subject_name
year = self.object.year_taken
return reverse_lazy('student-list', kwargs={"subject_name_id": subject.id, "year_taken": year})
modal.html
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" id="grade-form">
<div class="modal-body">
{% csrf_token %}
{{ form.as_p }}
{% comment %} <input type="submit" class="btn btn-sm btn-block btn-primary" value="Save"> {% endcomment %}
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" data-form-url="" class="btn btn-primary" id="save-form">Save changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
main.js
var modalDiv = $("#modal-div");
$(".open-modal").on("click", function () {
$.ajax({
type: 'GET',
url: $(this).attr("data-url"),
success: function (data) {
modalDiv.html(data);
$("#exampleModalCenter").modal();
}
});
});

Answer 1

<form method="post" id="grade-form" action = " The url path where you will handle the submit of form">
<div class="modal-body">
{% csrf_token %}
{{ form.as_p }}
{% comment %} <input type="submit" class="btn btn-sm btn-block btn-primary" value="Save"> {% endcomment %}
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" data-form-url="" class="btn btn-primary" id="save-form">Save changes</button>
</div>
</div>
</form>
just add an attribute action in the following form when you click on submit it will take you to the url equivalent to href url hope you understand