title: When I select the options from the dropdown the button should be triggered automatically and produce the unique Id
body: <p>I have a drop down and when I select one option from the dropdown the button has to be triggered automatically and it produces some unique id. I am not sure how the trigger can happen when we select the value from the dropdwon.
  I have refered this link
  <a href="https://stackoverflow.com/questions/29217697/auto-trigger-click-on-a-button-when-selecting-from-dropdown-list">Auto trigger click on a button when selecting from dropdown list</a></p>
  
  <p>but its not working and its not showing any error. I can see that its not going inside the button click function. can someone help me how to do the auto click when we select the dropdown option?
  I am attacching the code here</p>
  
  <pre><code>&lt;div id="dialog-form" title="Send Email Invite"&gt;
          &lt;form&gt;
              &lt;fieldset&gt;               
                  &lt;label for="select1"&gt;Round Level&lt;/label&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;select name="select1" class="form-control" id="select1" style="width:200px; height:30px;" required&gt;
                          &lt;option value=""&gt;Select the below option&lt;/option&gt;
                          {% for each_round in round_names %}
                          &lt;option value="{{each_round.round_id,each_round.round_name}}"&gt;{{each_round.round_name}}&lt;/option&gt;
                          {% endfor %}
                      &lt;/select&gt;
                      &lt;div class="valid-feedback"&gt;Valid&lt;/div&gt;
                      &lt;div class="invalid-feedback"&gt;Please fill out this field&lt;/div&gt;
                      &lt;div class="col-md-4" id="generateButton" style="display:none;" required&gt;
                          &lt;input id="generateUrl" value="generate url" size="40%" readonly /&gt;
                          &lt;input type="button" class="btn btn-info" value="Generate URL" id="urlbutton"&gt;&lt;/input&gt;
                      &lt;/div&gt;
                      &lt;div id="result"&gt;
                          &lt;textarea name="rdesc" id="rdesc" style="width:200px; height:300px; display:none;"
                              required&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
  
  
                  &lt;/div&gt;
                  &lt;script&gt;
                      $("#select1").on('change', function () {
                          $("[name='select1']:submit").trigger("#urlbutton")
                          var dropdownValue = document.getElementById("select1");
                          var roundName = dropdownValue.options[dropdownValue.selectedIndex].value;
  
                          $.ajax({
                              type: 'POST',
                              url: 'blah',
                              data: {
                                  'blah': blah
                              },
                              success: function (results) {
                                  $("#rdesc").show();
                                  $("#rdesc").text(results.round_description);
  
                              }
  
                          })
  
  
                      })
  
                  &lt;/script&gt;
  
                  &lt;input type="submit" tabindex="-1" style="position:absolute; top:-1000px"&gt;
              &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;script&gt;
  
          $("#urlbutton").click(function () {
              console.log("i am coming here");
              $.ajax({
                  type: 'POST',
                  url: 'blah',
                  data: {
                      'blah':blah
                  },
                  success: function (data) {
                      var url_textbox = document.getElementById("generateUrl");
                      url_textbox.setAttribute('value', data.url);
                  }
              })
          })
      &lt;/script&gt;
  </code></pre>