title: How to submit a form having dropdown values using ajax in flask?
body: <p>I am trying to submit a form with having a dropdown list using ajax and jquery in the flask. I was able to submit any simple form, but the form with a dropdown list is not getting submitted via ajax. What may be the possible error? or in which step I am doing the mistake?</p>
  <p>I am getting  <strong>Method Not Allowed,
  The method is not allowed for the requested URL.</strong> error.</p>
  <p>Please find the code below:-</p>
  <p><strong>app.py</strong></p>
  <pre><code>from flask import Flask, render_template, request
  
  app = Flask(__name__)
  
  
  @app.route('/')
  def index():
    return render_template('sample_selector_dashboard.html')
  
  @app.route('/sample_selector', methods=['POST', 'GET']) 
  def sample_selector():
    print(request.method)
    sel_lbl = request.form.get('lbl')          
    sel_country = request.form.get('cntry')
    print(sel_lbl, &quot;-&quot;, sel_country)
  
    return render_template('sample_selector_dashboard.html')
  
  
  if __name__ == '__main__':
    app.run(debug=True)
  </code></pre>
  <p><strong>sample_selector_dashboard.html</strong></p>
  <pre><code>&lt;!doctype HTML&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
  &lt;!-- Required meta tags --&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;!-- Bootstrap CSS --&gt;
  &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css&quot; 
  rel=&quot;stylesheet&quot;
  integrity=&quot;sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We&quot; 
   crossorigin=&quot;anonymous&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; 
   href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&quot;&gt;
   &lt;!-- Our CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;{{ 
    url_for('static',filename='styles/styles.css') }}&quot;&gt;
  
    &lt;title&gt;Flask Sample Selector&lt;/title&gt;
    &lt;/head&gt;
  
   &lt;body&gt;
  
   &lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;row flex-nowrap&quot;&gt;
    &lt;div class=&quot;col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark&quot;&gt;
      &lt;div class=&quot;d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100&quot;&gt;
        &lt;ul class=&quot;nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start&quot; id=&quot;menu&quot;&gt;
          &lt;form id=&quot;sample-submit&quot; method=&quot;post&quot;&gt;
            &lt;div class=&quot;nav-item dropdown&quot; id=&quot;select-class-dropdown&quot;&gt;
              &lt;h4&gt;Select Class&lt;/h4&gt;
              &lt;select id=&quot;class_s&quot; name=&quot;class_s&quot; class=&quot;form-select form-control&quot;
                aria-label=&quot;Default select example&quot;&gt;
                &lt;option value=&quot;speed_limit_010&quot;&gt;speed_limit_010&lt;/option&gt;
                &lt;option value=&quot;speed_limit_020&quot;&gt;speed_limit_020&lt;/option&gt;
                &lt;option value=&quot;speed_limit_030&quot;&gt;speed_limit_030&lt;/option&gt;
                &lt;option value=&quot;speed_limit_040&quot;&gt;speed_limit_040&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;nav-item dropdown&quot; id=&quot;select-label-dropdown&quot;&gt;
              &lt;h4&gt;Select Label&lt;/h4&gt;
              &lt;select id=&quot;label_s&quot; name=&quot;label_s&quot; class=&quot;form-select form-control&quot;
                aria-label=&quot;Default select example&quot;&gt;
                &lt;option value=&quot;speed_limit_010&quot;&gt;speed_limit_010_l&lt;/option&gt;
                &lt;option value=&quot;speed_limit_020&quot;&gt;speed_limit_020_l&lt;/option&gt;
                &lt;option value=&quot;speed_limit_030&quot;&gt;speed_limit_030_l&lt;/option&gt;
                &lt;option value=&quot;speed_limit_040&quot;&gt;speed_limit_040_l&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;nav-item dropdown&quot;&gt;
              &lt;h4&gt;Select Cluster&lt;/h4&gt;
              &lt;select id=&quot;cluster&quot; name=&quot;cluster&quot; class=&quot;form-select form-control&quot;
                aria-label=&quot;Default select example&quot;&gt;
                &lt;option value=&quot;asi&quot;&gt;ASIA&lt;/option&gt;
                &lt;option value=&quot;europe&quot;&gt;EUROPE&lt;/option&gt;
                &lt;option value=&quot;africa&quot;&gt;AFRICA&lt;/option&gt;
                &lt;option value=&quot;usa&quot;&gt;USA&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;div class=&quot;nav-item dropdown&quot; id=&quot;select-country-dropdown&quot;&gt;
              &lt;h4&gt; Select Country&lt;/h4&gt;
              &lt;select id=&quot;country&quot; name=&quot;country&quot; class=&quot;form-select form-control&quot;
                aria-label=&quot;Default select example&quot;&gt;
                &lt;option value=&quot;india&quot;&gt;IN&lt;/option&gt;
                &lt;option value=&quot;germany&quot;&gt;DE&lt;/option&gt;
                &lt;option value=&quot;austria&quot;&gt;AT&lt;/option&gt;
                &lt;option value=&quot;pakistan&quot;&gt;PK&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
  
            &lt;button type=&quot;submit&quot; id=&quot;get_images&quot; name=&quot;get_images&quot; class=&quot;btn btn-info&quot; value=&quot;Get_Images&quot;&gt;Get Images
            &lt;/button&gt;
          &lt;/form&gt;
  
  
          &lt;button type=&quot;button&quot; id=&quot;good&quot; onclick=&quot;get_selected_samples_list_on_good_button_click()&quot;
            class=&quot;btn btn-success&quot;&gt;Good&lt;/button&gt;
  
  
        &lt;/ul&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;script 
  src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt; 
  &lt;/script&gt;
  &lt;!--  Our JS --&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;{{ url_for('static', 
  filename='scripts/index.js') }}&quot;&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  <p>** index.js **</p>
  <pre><code>$(document).ready(function() {
  
  $('form').on('submit', function(event) {
  
      $.ajax({
          data : {
              cls : $('#class_s').val(),
              lbl : $('#label_s').val(),
              cluster : $('#cluster').val(),
              cntry : $('#country').val()
          },
          type : 'POST',
          url : '/sample_selector'
      })
      .done(function(data) {
  
          if (data.error) {
              alert(&quot;Erroe&quot;)
          }
          else {
              alert(&quot;Success&quot;)
          }
  
      });
  
      event.preventDefault();
  
  });
  
  });
  </code></pre>