title: Update field in rendered Django Form
body: <p>I'm having a hard time figuring out how to update a Field in Django Form while editing the Form.</p>
  
  <p>In my form I have a ModelChoiceField and ChoiceField: first is a list of Car manufacturers, second is a list of models available for this manufacturer. Obviously I don't want to fill second field with models for every manufacturer but only for one selected in first ModelChoiceField.</p>
  
  <p>Here's my example Form:</p>
  
  <pre><code>class PostForm(forms.ModelForm):
      make = forms.ModelChoiceField(queryset=Manufacturer.objects.all())
      model = forms.ChoiceField()
      ...
  </code></pre>
  
  <p>To render the template with form I use Class-based View:</p>
  
  <pre><code>class CreatePost(View):
      template_name = 'post/edit_post.html'
  
  def get(self, request):
      form = PostForm()
      return render(request, self.template_name, {'form': form})
  
  def post(self, request):
      form = PostForm(request.POST)
  
      if form.is_valid():
          post = form.save(commit=False)
          post.owner = request.user
          post.save()
          return redirect('homepage')
  
      return render(request, self.template_name, {'form': form})
  </code></pre>
  
  <p>In my template after I render <code>PostForm</code> I disable <code>model</code> field with <code>jQuery</code> and wait for user to select some value in <code>make</code> field. Here's my template:</p>
  
  <pre><code>&lt;form class="form-horizontal" action="" method="post" enctype="multipart/form-data"&gt;
        {% csrf_token %}
        {{ form.non_field_errors }}
        {% for field in form %}
             &lt;div class="form-group"&gt;
               &lt;label class="control-label"&gt;{{ field.label_tag }}&lt;/label&gt;
               {{ field }}
               {{ field.errors }}
             &lt;/div&gt;
             &lt;div class="form-group"&gt;
                &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
             &lt;/div&gt;
        {% endfor %}      
  &lt;/form&gt;
  </code></pre>
  
  <p>And then use <code>AJAX</code> to request values for <code>model</code> field (in this sample code I only return single item):</p>
  
  <pre><code>$('#id_make').change(function () {
          $.ajax({
              url: '{% url 'get_models' %}',
              data: {'make': $('#id_make :selected').text()},
              dataType: 'json',
              success: function (data) {
                  $('#id_model').append($('&lt;option&gt;', {
                      value: 1,
                      text: data.model})).removeAttr('disabled');
                  }
              });
          })
  </code></pre>
  
  <p>Here's the view I'm using to process AJAX call (for display purposes and to keep things simple in this question I have only one record in <code>models</code> table <code>Series</code> for each <code>manufacturer</code> and knowing this I only query for one record. <code>series</code> is CharField that keeps title of <code>model</code> like 'Lancer' for 'Mitsubishi' manufacturer.):</p>
  
  <pre><code>def get_models(request):
      manufacturer = Manufacturer.objects.get(make=request.GET.get('make'))
      model = Series.objects.get(make_fk= manufacturer)
      return JsonResponse({'model': model.series})
  </code></pre>
  
  <p>With this done I do see updated options in <code>&lt;select&gt;</code> element for <code>model ChoiceField</code>, but after I select new value in <code>model ChoiceField</code> and submit form I receive:</p>
  
  <pre><code>Select a valid choice. 1 is not one of the available choices."
  </code></pre>
  
  <ul>
  <li>'1' is id of the element that I appended to <code>&lt;select&gt;</code> element and then submit.</li>
  </ul>
  
  <p>I then dug deeper and printed the contents of submitted Form and it appeared that although I saw <code>&lt;select&gt;</code> element updated in the template, it stayed blank in the Form I've submitted:</p>
  
  <pre><code>&lt;select name="model" class="form-control" id="id_model"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>Why is this happening and how to update Form fields itself rather than just <code>&lt;select&gt;</code> element?</p>