Django Model Choice Field - Depend On Other Field's Choice

I need django modelform with 2 fields, where second field choice list depends on what was chosen in first one. My model: class Offer(BaseModel): VEHICLE_TYPES = ( ('pe

Solution 1:

You probably can't because it depends of user interaction with your form: your server can't know in advance which element your user will select before sending the form to the browser. You could probably achieve this using ajax. I think a working process could be :

• Create a form with all the fields, and make make field hidden
• Create a view (I'll call it AjaxMakeFieldView) that will catch an ajax request taking a vehicle_type argument and return the HTML for make field, populated with relevant data. Add a URL in your URLConf for this view.
• In your template, add a Javascript binding : when user select a vehicle_type, the browser will send aan ajax request to AjaxMakeFieldView and replace hidden make field with returned HTML

If you don't want javascript, another way would be a two step form :

• A first form with a vehicle_type field
• Once the first form is submitted, your user get a second form with a make field, which initial data is populated depending of vehicle_type selected in the first form.

I've never done this, but Django documentation on Form wizard seems a good place to start.

Solution 2:

This is how I ended up having two model choice fields depending on each other, on one page. In the below, field2 is depending on field1:

Javascript portion

Note that in $.each(), $.parseJSON(resp) should NOT be used (instead of just json) as we're already have it parsed by jQuery (due to the content_type='application/json' response) - see I keep getting "Uncaught SyntaxError: Unexpected token o".

$(document).ready(function() {

    $("#id_field2").empty();

    $("#id_field1").change(function(){

        $.ajax({
            url: "{% url 'ajax_get_field_2' %}",
            type: 'GET',
            data:  {field1_id: $("#id_field1").val()},
            dataType: "json",
            success: function(resp){
                $("#id_field2").empty();
                $.each(resp, function(idx, obj) {
                    $('#id_field2').append($('<option></option>').attr('value', obj.pk).text(obj.fields.code + ' (' + obj.fields.affection + ')'));
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

    });
});

Django views.py portion

Note that this can probably be done by django-rest-framework as well. I'm obtaining fields=('id', 'code', 'affection')) from my MyModel2 - these can then be reached in JQuery using obj.fielsd.<myfieldname>.

class AjaxField2View(generic.View):

    def get(self, request, *args, **kwargs):
        field_1 = get_object_or_404(MyModel1, pk=request.GET.get('field1_id', ''))
        model2_results = MyModel2.objects.filter(k_value=field_1 .k_value)
        return HttpResponse(serializers.serialize('json', model2_results, fields=('id', 'code', 'affection')), content_type='application/json')

Solution 3:

Another smart method query/free and no views needed,

is to make html tags for options that related to field A choice.

For example, in field B options:

<option example_tag="example_value" value="5"></option>

This tag should be related to either field A value or text.

Using JS to display block/none using this option tag accordingly.

And don't forget to reset value for every time user changes field A.