How to build dynamic form with Django based on user input

I am new to Django and I want to achieve the following.

I need to be able to define the displayed form depending on the user input. The end goal is to show the user a form where he can input his exercises performed for a particular day. But depending on the type of exercise, the underlying Model is different. For example, for typical strength exercise, the model is that an exercise is a combination of sets, reps and weight. While if the exercise is a typical cardio one then the model is a combination of time and distance.

So, in the user form, I would like to have checkboxes with the different exercises’ types (strength, cardio) and if the user check one or several boxes, then the form displays the associated “sub-form” for the underlying exercise model. And of course, for each “sub-form” the user shall have the possiblity to add one or more entries (so one or more exercises of the same type).

What is the correct way of achieving this with Django ? I have read that AJAX requests are needed but I know nothing about AJAX (in fact I know nothing about web application :)) and I could not find somewhere in the Django documentation such an application.

Thanks for your help.

This is a complicated question and will depend on how you want to display data on different exercises.

To start with, I would look into formsets, specifically inlineformset_factory, which will help you send multiple related rows to a form, as well as provide basic functionality to add/remove rows. This doesn’t need ajax (though can be done in a more modern way by using ajax).

You could then define differnet types of formsets corresponding to the different types of exercise, have corresponding templates for these, and include the one you want, pass the formset you want to the main template, and you could do all of this without using ajax.

TBH, if you’re new to Django and don’t know about JS/AJAX, I’d stick to the pure django solution to start with - learn one thing at a time so it doesn’t get too overwhelming!

1 Like

You’ve got a couple different ways of handling this, AJAX is just one of them. (Another method is to preload the forms on the page in hidden divs, and then use JavaScript to display the appropriate subform when necessary.) Either way, you won’t find “Django documentation” about this because Django doesn’t control the browser. That type of UI requires JavaScript.

But mostly, I’m going to echo @michjnich here and agree that if you’re that new to web development, stick that idea on the back-burner for now. As a first step, implement your site as multiple pages. Page 1 allows the user to select the type of exercise. When that page is submitted, use that submission to direct them to the appropriate exercise-type-specific page.

2 Likes

While your getting more familiar with Django, one strategy is to break the form into multiple steps. I don’t know if that will work in your case. So, first display a view/template GET form where the user chooses if they’re doing a strength or cardio workout. Use that to load the next view/template/form.