i’ve have application in the home page there shows some posts with a contact form, i want to create a modal formset in another view! is it possible please ?
@login_required
def addPopupVistor(request):
formset = VistorFormSet(queryset=Vistor.objects.none(),prefix='formsetvisitor')
if request.is_ajax() and request.method == 'POST':
formset = VistorFormSet(request.POST,prefix='formsetvisitor')
if formset.is_valid():
for form in formset:
obj = form.save(commit=False)
if form.cleaned_data !={}:
obj.admin = request.user
obj.save()
return JsonResponse({'success':True})
else:
return JsonResponse({'success':False,'error_msg':formset.errors})
return render(request,'main/home.html',{'formsetvisitor':formset})
const addNewFormRow = document.getElementById('addPopUpButton')
const totalNewPopUpForms = document.getElementById('id_formsetvisitor-TOTAL_FORMS')
addNewFormRow.addEventListener('click',add_new_popuprow);
function add_new_popuprow(e){
if(e){
e.preventDefault();
}
const currentFormPopUpClass = document.getElementsByClassName('popup_modal_formset')
const countpopupForms = currentFormPopUpClass.length
const formCopyPopupTarget = document.getElementById('visitorform')
const empty_form = document.getElementById('empty_popup_formset').cloneNode(true);
empty_form.setAttribute('class','relative p-2 bg-gray-900 bg-opacity-25 border border-gray-900 rounded-xl pb-14 popup_modal_formset')
empty_form.setAttribute('id',`form-${countpopupForms}`)
const rgx = new RegExp('__prefix__','g')
empty_form.innerHTML = empty_form.innerHTML.replace(rgx,countpopupForms)
totalNewPopUpForms.setAttribute('value',countpopupForms + 1)
formCopyPopupTarget.append(empty_form)
}<button onclick="modal()" class="some css class">add new guest</button>
<div id="modal" class="w-full fixed top-0 md:overflow-y-scroll hidden flex flex-wrap p-1 h-screen justify-center items-center bg-black opacity-90" style="z-index: 99999;">
<div class="w-full md:w-10/12 p-2 bg-white rounded-xl">
<button id="addPopUpButton" class="px-4 py-1 pb-2 text-white focus:outline-none header rounded-xl">
{% trans "add new form" %}
<i class="fas fa-plus"></i>
</button>
<form method="POST" class="mt-2" id="addnewguests">{% csrf_token %}
{{formsetvisitor.management_form}}
<div id="visitorform" class="grid md:grid-cols-3 gap-16 md:gap-x-3 md:gap-y-8">
{% for form in formsetvisitor.forms %}
{{ form.pk }}
{{form}}
<!-- first form -->
<div class="relative p-2 bg-gray-900 bg-opacity-25 border border-gray-900 rounded-xl pb-14 popup_modal_formset">
<div class="relative groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">full name</label>
{{form.full_name | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
</div>
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-1">
<div class="relative mt-2 groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">dob</label>
{{form.dob | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
{% if form.dob.errors %}
<p class="w-full pb-2 pr-2 text-white rounded-xl" id="dob_error">{{form.dob.errors}}</p>
{% endif %}
</div>
<div class="relative mt-2 groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">city </label>
{{form.city | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none city'}}
{% if form.city.errors %}
<p class="pb-2 pr-2 text-white rounded-xl" id="city_error">{{form.city.errors}}</p>
{% endif %}
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-1">
<div class="relative mt-2 groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">nation</label>
{{form.nation | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
{% if form.nation.errors %}
<p class="w-full pb-2 pr-2 text-white rounded-xl" id="nation_error">{{form.nation.errors}}</p>
{% endif %}
</div>
<div class="relative mt-2 groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">gender </label>
{{form.gender | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent'}}
{% if form.gender.errors %}
<p class="w-full pb-2 pr-2 text-white rounded-xl" id="gender_error">{{form.gender.errors}}</p>
{% endif %}
</div>
</div>
<div class="relative mt-2 groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">job </label>
{{form.job | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
{% if form.job.errors %}
<p class="w-full pb-2 pr-2 text-white rounded-xl" id="job_error">{{form.job.errors}}</p>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="relative p-2 bg-gray-900 bg-opacity-25 border border-gray-900 rounded-xl pb-14 hidden" id="empty_popup_formset">
<div class="relative groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">full name</label>
{{formsetvisitor.empty_form.full_name | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
{% if formsetvisitor.empty_form.full_name.errors %}
<p class="w-full pb-2 pr-2 text-white rounded-xl" id="full_name_set_error" >{{formsetvisitor.empty_form.full_name.errors}}</p>
{% endif %}
</div>
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-1">
<div class="relative mt-2 groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">dob</label>
{{formsetvisitor.empty_form.dob | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
<p class="w-full pb-2 pr-2 text-white rounded-xl" id="dob_set_error">{{formsetvisitor.empty_form.dob.errors}}</p>
</div>
<div class="relative mt-2 groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">city</label>
{{formsetvisitor.empty_form.city | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
<p class="w-full pb-2 pr-2 text-white rounded-xl" id="city_set_error" >{{formsetvisitor.empty_form.city.errors}}</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-1">
<div class="relative mt-2 groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">nation</label>
{{formsetvisitor.empty_form.nation | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
<p class="w-full pb-2 pr-2 text-white rounded-xl" id="nation_set_error" >{{formsetvisitor.empty_form.nation.errors}}</p>
</div>
<div class="relative mt-2 groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">gender </label>
{{formsetvisitor.empty_form.gender | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
<p class="w-full pb-2 pr-2 text-white rounded-xl" id="gender_set_error" >{{formsetvisitor.empty_form.gender.errors}}</p>
</div>
</div>
<div class="relative mt-2 groupinput bglightpurple rounded-xl">
<label class="absolute mt-1 mr-2 text-xs text-white top-1">job </label>
{{formsetvisitor.empty_form.job | add_class:'w-full pt-6 pb-1 pr-2 text-white bg-transparent focus:outline-none'}}
<p class="w-full pb-2 pr-2 text-white rounded-xl" id="job_set_error" >{{formsetvisitor.empty_form.job.errors}}</p>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse rtl">
<input name="visitorformbtn" type="submit" class="some css class" value="{% trans "save" %}">
<button id="cancel" class="some css class">
{% trans "cancel" %}
</button>
</div>
</form>
</div>
</div>but i dont have any idea how to call back it in the home page without make it in the home view ? and the form will go through ajax request to save the forms, but i dont know how to call the form inputs into the home template .
i appreciate any idea