Django - Submit multiple forms using ajax - django

Question

I would like to understand how to submit 2 forms simultaneously using ajax.
I display a form composed of 2 model forms, for 2 models linked with OneToOne relationship. Managing the display is not a big deal, I can also manage the submit using a Django view; but I would like to know how to deal with javascript.
Why? The form is called from a global menu and displayed in a modal, and I would like only to close the modal on submit, but not refresh the page.
Here are some (simplified) code snippets I tried so far:
user_profile.html (modal form):
<form id="upd-user" action="." method="post" url-endpoint="{% url 'polls:upd_user_detail' %}"
comp-slug="{{ comp_slug }}" usr-id="{% if usr_id %} {{ usr_id }} {% else %} 0 {% endif %}">
{% csrf_token %}
{{ user_form }}
{{ usercomp_form }}
<button class="btn btn-success" type="submit">{% if usr_id %}Mettre à jour{% else %}Créer{% endif %}</button>
&nbsp &nbsp &nbsp
<a class="btn btn-secondary back_btn" data-dismiss="modal">Annuler</a>
</form>
The modal is embedded in this snippet:
<div id="usr_detail" class="modal fade hide" role="dialog" tabindex='-1'>
<div class="modal-dialog modal-lg">
<div class="modal-content usr_form_content">
{% include './user_profile.html' %}
</div>
</div>
</div>
Javascript submit function:
$(".usr_form_content").on("submit", "#upd-user", function(event) {
event.preventDefault();
$.ajax({
method: 'POST',
url: $(this).attr('url-endpoint'),
data: {
comp_slug: $(this).attr('comp-slug'),
usr_id: $(this).attr('usr-id'),
user_form: user_form.serialize(),
usercomp_form: usercomp_form.serialize()
},
success: handleSuccess,
error: handleError,
});
function handleSuccess(data) {
$("#usr_detail").modal("hide");
};
function handleError(jqXHR, textStatus, errorThrown){
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
}
})
The error message is quite clear:
Uncaught ReferenceError: user_form is not defined
I now I need to make the transition between the form and js, I probably need to link these values to $('this) but I don't know how.
If it helps, here's the GET view:
comp_slug = request.GET["comp_slug"]
company = Company.get_company(comp_slug)
usr_id = int(request.GET["usr_id"]) # comes as string when 0
if usr_id > 0:
profile_user = User.objects.get(pk=usr_id)
user_form = UserBaseForm(instance=profile_user)
usercomp_form = UserCompForm(instance=profile_user.usercomp)
user_form.fields['username'].disabled = True # Disable updates of the field
else:
user_form = UserBaseForm()
usercomp_form = UserCompForm()
context = {
"comp_slug": comp_slug,
"company": company,
"usr_id": usr_id,
"user_form": user_form,
"usercomp_form": usercomp_form,
}
template = render_to_string('polls/user_profile.html', context=context, request=request)
return JsonResponse({"user_template": template})
And related js part (it works fine - I tried to generated necessary variables at this stage, but it did not work neither)
$('.update-user').click(function() {
$.ajax({
method: 'GET',
url: $(this).attr('url-endpoint'),
data: {
comp_slug: $(this).attr('comp-slug'),
usr_id: $(this).attr('usr-id'),
},
success: handleSuccess,
error: handleError,
});
function handleSuccess(data) {
$(".usr_form_content").html(data.user_template);
};
function handleError(error_data) {
console.log("error");
console.log(error_data);
};
})