title: how to run an ajax request on onchange event in select box of flask app
body: <p>I have a flask app which have many select boxes. Each select box needs to be  populated with data based on selection in previous select box. I am planning to use ajax for this. Every select box has to be submitted based on <code>onchange</code> event. And there is a final form submit button which will be submitted once all select boxes have some value selected.</p>
  
  <p>javascript : 
      </p>
  
  <pre><code>    $(function() {
      $('select1').select(function() {
          $.ajax({
              url: '/getdata',
              data: $('form').serialize(),
              type: 'POST',
              success: function(response) {
                  console.log(response);
              },
              error: function(error) {
                  console.log(error);
              }
          });
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>html :</p>
  
  <pre><code>&lt;form method="post" action="/getdata"&gt;
      Project : &lt;select name="select1" required&gt;
      &lt;option&gt;&lt;/option&gt;
      {% for p in project %}
      {% for i in p %}
      &lt;option&gt;{{ i }}&lt;/option&gt;
      {% endfor %}
      {% endfor %}
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="col-md-6"&gt;
      Task : &lt;select name="category" required&gt;
      &lt;option&gt;----&lt;/option&gt;
      {% for p in task %}
      {% for i in p %}
      &lt;option&gt;{{ i }}&lt;/option&gt;
      {% endfor %}
      {% endfor %}
  &lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
   &lt;div class="row p-t-20"&gt;
  &lt;div class="col-md-6"&gt;
      Subtask : &lt;select name="category" required&gt;
      &lt;option&gt;----&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;
  &lt;div class="col-md-6"&gt;   
      Category : &lt;select name="category" required&gt;
      &lt;option&gt;----&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;&lt;/div&gt;&lt;/from&gt;
  </code></pre>
  
  <p>flask view : </p>
  
  <pre><code>@tt.route('/ti',methods = ['POST', 'GET'])  
  def report():
      return render_template('ti.html')
  @tt.route('/getdata',methods = ['POST', 'GET']) 
  def report():
      project = request.form['select1']
      ~~~ Database codes ~~~~
      return render_template(task=data)
  </code></pre>
  
  <p>How to populate, the database query result into next select box? I also need to do a final submit once all select boxes are selected with some data.</p>