title: Django, ajax populate form with model data
body: <p>So I got a simple registration form. In this form there are 3 more fields:</p>
  
  <ul>
  <li>University</li>
  <li>Course</li>
  <li>Module</li>
  </ul>
  
  <p>What I'm trying to do is to filter the data. So when the user select a University, the course field(select) will show all the courses that belong to this university. Also when the user select a course, the module field(select) will show all the modules that belong to this course. If you check the image, you will see it's kinda simple.</p>
  
  <p>I managed to show all the universities, courses and modules but that's not practical since the data aren't correct(shows all entries). I know how to filter the queryset but I don't know how to use AJAX to do that. Tried many tutorials but couldn't find something so I'm sorry for not posting code.</p>
  
  <p>If you can point me to the right tutorial, example or give me some code to start working on it...</p>
  
  <p><img src="https://i.stack.imgur.com/YOVsb.png" alt="Screenshot of the form"></p>
  
  <p><strong>UPDATE</strong>
  I used Del's example to start working on it. The thing is that I'm not good at all with AJAX and JS. So I created a view which receives the request from the ajax form(for now it just returns all courses, no filtering). The issue I'm having is that when I select the university, then the <code>course</code> select gets empty. So I guess it doesn't get the data from the view. If you can have a look..</p>
  
  <p>view</p>
  
  <pre><code>def ajax_get_courses(request):
      courses = Course.objects.all()
      if request.is_ajax():
          data = serializers.serialize('json', courses)
          return HttpResponse(data,'json')
      else:
          return render_to_response('registration/registration_form_teacher.html', {'courses':courses}, context=RequestContext(request))
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(document).ready(function(){
      $("#university").change(function(){
          var request = $.ajax({
              url: "{% url 'ajax_get_courses' %}",
              type: "POST",
              data: { university: $("#university").val(),
                      csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
              dataType: "html"
          });
  
          request.done(function(msg) {
                    $("#course").html( msg );
          });
  
      });
  
  });
  </code></pre>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>So after I select a university, the select course source code is like this:</p>
  
  <pre><code>&lt;select id="course" name="course" class="form-control"&gt;[{"pk": 1, "model": "studies.course", "fields": {"attendance": "FT", "name": "Computer Science", "degree": "BSc (Hons)", "university": 1, "modules": [], "years": 3}}, {"pk": 2, "model": "studies.course", "fields": {"attendance": "FT", "name": "Computer Science", "degree": "MComp (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 3, "model": "studies.course", "fields": {"attendance": "FT", "name": "Civil Engineering", "degree": "BEng (Hons)", "university": 1, "modules": [], "years": 3}}, {"pk": 4, "model": "studies.course", "fields": {"attendance": "FT", "name": "Civil Engineering", "degree": "MEng (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 5, "model": "studies.course", "fields": {"attendance": "FT", "name": "Pharmacy", "degree": "MPharm (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 6, "model": "studies.course", "fields": {"attendance": "FT", "name": "Aeronautical Engineering", "degree": "MEng (Hons)", "university": 4, "modules": [], "years": 4}}, {"pk": 7, "model": "studies.course", "fields": {"attendance": "FT", "name": "Biochemistry", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}, {"pk": 8, "model": "studies.course", "fields": {"attendance": "FT", "name": "Chemistry", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}, {"pk": 9, "model": "studies.course", "fields": {"attendance": "FT", "name": "Business Studies", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}]&lt;/select&gt;
  </code></pre>
  
  <p>Which means that I'm getting the data but i have to add some html? Like <code>&lt;li&gt;...&lt;/li&gt;</code>?</p>