This article will show a possible implementation of a modal-based form selection in Django using htmx (and a little bit of JavaScript). Django comes with a very handy form implementation but the user experience can be complicated to scale when you have a large amount of Foreign keys selectable for a model. Let's take the example of a model we will call Product that a company purchases for the business. This Product is stored in a Factory. This would work very well to use the standard (common in django for Foreign keys forms) is the language accessibility. When you do not understand the language of a form, you usually can by-pass this issue by copy-paste every field and translate. For

Factory

------

{% endblock %} ``` Once again, here, we use the combined power of htmx and hyperscript to send the request to open the modal on click. When the modal is opened, the querystring_upd tag navigate in the table as smoothly as if we were on a standard page. **6- Additional JS to save the selected item in the DOM** During the fabrication of the table, we added a specific column for the ID that would call a Javascript function. This function will be used to display the click result and store the id in the hidden element for the latter form POST request. ``` let removeFadeOut=( el, speed )=> { const seconds = speed/1000; el.style.transition = "opacity "+seconds+"s ease"; el.style.opacity = 0; setTimeout(function() { el.parentNode.removeChild(el); }, speed); } let setFactoryValue = (id) => { let selectedFactory= document.getElementById(`factory-button-${id}`) let parentDiv = selectedFactory.parentNode.parentNode; let selectedFactoryNameValue = parentDiv.firstElementChild.innerHTML let factoryValueToSet= document.getElementById(`hidden_factory_value`) factoryValueToSet.value= selectedFactory.value let factoryNameToShow= document.getElementById(`form__visible__factory_name_display`) factoryNameToShow.innerHTML= selectedFactoryNameValue let modalDisplayed= document.getElementById(`factory-modal`) if(modalDisplayed){ removeFadeOut(modalDisplayed, 200); } }; ``` **7- Final form editing** We can finally update the view of the POST form to inform Django to use the value from our hidden element as the ForeignKey we want to set for the factory of our new Product. ``` @login_required(login_url='/authen/') def product_form(request): if request.method == 'POST': form = ProductForm(request.POST, request.FILES) selected_factory_id = int(request.POST['factory']) selected_factory = Factory.objects.filter(id=selected_factory_id).order_by("-factory_reg_date")[0] selected_product_name = request.POST['product-name'] form.product_name = selected_product_name updated_request = request.POST.copy() updated_request.update({'product_name': selected_product_name}) updated_form = ProductForm(updated_request) if updated_form.is_valid(): product = updated_form.save(commit=False) product.product_creating_user = request.user product.product_factory_name = selected_factory updated_form.save() return render(request, 'product_form.html', {'form': form}) else: print(form.errors) else: form = ProductForm() return render(request, 'product_form.html', {'form': form}) ``` You should now have a form where you can add multiple, large sets of Foreign Key and where the user can easily search and review all information with a SPA UI experience. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iizjdysy4jw12l8p0qz7.gif)

guillaumesy

Dynamic selection modal in Django with htmx and django-tables2

Join Our Newsletter. No Spam, Only the good stuff.