Ajax вызов поля формы для автоматического заполнения других полей

Question

Я использую python django и обычную html форму. Итак, у меня была очень специфическая ситуация c, когда у меня есть форма, и она строит «Меню» для программ питания в меню, в котором есть типы еды: Завтрак, утренняя закуска, обед, ужин и т. Д. c .. для каждого типа еды есть компоненты: зерно, овощи, фрукты, мясо, напитки

единичное блюдо состоит из продуктов и компонентов. когда пользователь выбирает единое блюдо (компонент: мясо и фрукты)

как я могу построить способ, когда я выбираю единое блюдо, он автоматически заполняет поля Мясо и фрукты формы на основе элементов унифицированного питание ..

все мои модели с полями многие-ко-многим связаны должным образом, мне просто нужно знать, каким способом я могу подойти к этому.

если требуется дополнительный код, пожалуйста, дайте я знаю страница

<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

Надеюсь, это поможет.

Создайте представление для получения запроса ajax и верните значение как HTML (вы также можете вернуть как JSON).

Call функция запроса ajax при изменении единичного обеда.

Примерно так:

Если '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"
    });

})

Дайте знать, если это поможет.