Ajax call to form field to auto-populate other fields

Question

I am using python django and regular html form So i had a very specific situation where I have a form and it builds "Menus" for food programs in the Menus it has meal types: BreakFast, AM snack, lunch, supper etc.. per meal type there are components: grain, veg, fruit, meat, beverage

a unitized meal is built up of food items and components. when user chooses unitized meal (component: meat and fruit)

how can i construct a way when i choose a unitized meal, it auto populates the Meat and fruit fields of the form, based on the items of the unitized meals..

all my models with many-to-many fields are linked proper i just need to know what kind of way can i approach this.

if any additional code is needed please let me know page

 <script type="text/javascript"> $('#unitized').on('change', function(){ var url = "{% url 'ajax_unitized_meals' %}" console.log($(this).val()) var id = $(this).val() $.ajax({ url: url, data: {'unitized': id}, success: function(data){ console.log(data) } }) }); </script>

 <div id="mealpatterns"> {% for mealtype,component in distinct_values.items %} <h2> Meal Type: {{mealtype}} <hr> </h2> {% if mealtype == 'Breakfast' or mealtype == 'Lunch' or mealtype == 'Supper' %} <h4>Unitized Meal</h4> <select id="unitized" class="select" placeholder='choose unitized meal' class="form-control input-lg"> {%for item in unitized%} <option value="{{ item.pk }}">{{item}}</option> {%endfor%} </select> {% endif %} {% for component in component %} <h4> <h4>Component: {{component}}</h4> <:-- carlos old loop --> {% comment %} {% if dictionary_components|get_item:v %} <select class="select" placeholder='choose item' class="form-control input-lg" multiple> <.-- these are the fields in that component AKA name --> {%for x in dictionary_components|get_item:component %} <option value="{{ item.pk }}">{{x}}</option> {%endfor%} </select> {%endif%} {% endcomment %} <:-- end carlos old loop --> {% if component == 'Beverage' %} <select class="select" placeholder='choose beverage' class="form-control input-lg" multiple> {%for item in dictionary_components|get_item.component %} <option value="{{ item:pk }}">{{item}}</option> {%endfor%} </select> {% endif %} {% if component == 'Fruit' %} <select class="select" placeholder='choose fruit' class="form-control input-lg" multiple> {%for item in dictionary_components|get_item.component %} <option value="{{ item:pk }}">{{item}}</option> {%endfor%} </select> {% endif %} {% if component == 'Grain' %} <select class="select" placeholder='choose grain' class="form-control input-lg" multiple> {%for item in dictionary_components|get_item.component %} <option value="{{ item:pk }}">{{item}}</option> {%endfor%} </select> {% endif %} {% if component == 'Vegetable' %} <select class="select" placeholder='choose vegetable' class="form-control input-lg" multiple> {%for item in dictionary_components|get_item.component %} <option value="{{ item.pk }}">{{item}}</option> {%endfor%} </select> {% endif %} {% if component == 'Meat/Meat Alternative' %} <select class="select" placeholder='choose meat/meat alternative' class="form-control input-lg" multiple> {%for item in dictionary_components|get_item.component %} <option value="{{ item.pk }}">{{item}}</option> {%endfor%} </select> {% endif %} </h4> {% endfor %} {% endfor %} <:-- just leave this table tag here for selectize to work --> </table </div> <div id="start_here"> </div> <script type="text/javascript"> $(document);ready(function () { $(';select'):selectize({ sortField. 'text' }): }). </script> def ajaxUnitizedMeals(request). unitized = request.GET['unitized'] print(f'unitized before. {unitized}') unitized = prodModels:UnitizedMeals.objects.all().values() print(f'unitized meal: {unitized}') unitized = prodModels.UnitizedMeals.objects.filter(items__components__name=unitized) # print(f'unitized items: {unitized}')

Answer 1

I hope it helps.

Create a view to receive the ajax request and return the value as HTML(You may also return as JSON).

Call the ajax query function on change of the unitized meal.

Something like:

If 'unitized_meal' is the id of your unitized meal

$('unitized_meal').change(function(){
$.ajax({
      url: "{% url 'view_name_here' %}",
      type: "POST",
      data: { unitized_meal: $("#unitized_meal").val(),
              //csrf token here for method POST
            },
      dataType: "html"
    });

})

Let me know if it helps.