title: Change button function on click using jQuery
body: <p>Not sure what/where I went wrong.  Have been trying to dynamically change button function on click.  One is to open Bootstrap Modal and another is to go act as submit.  For some reason the if statement did not get executed at all.  Though I am totally new to jQuery and have been searching around with no luck. Appreciate any pointer please.  Here is what I have</p>
  
  <pre><code>submitButton.click(function(){
  // submitButton.on('click', function() { 
      var e = document.getElementById("ddlAct"), // get value of select option drop down list
          choosenAct = e.options[e.selectedIndex].value;  
  
      alert("hello"); // to check that this function gets call when  click the button
      alert(choosenAct); // check the value
      if (choosenAct == 'markasgone') {
          alert(choosenAct)
          $('#reasonModal').modal('show');
      } else {
          alert(choosenAct); // add the missing 'n' that cause issue in if stmt
          $("form").submit();
      }
  });
  </code></pre>
  
  <p>Result of the above script is :</p>
  
  <p>I get 2 alerts before the if statement and non afterwords. I put another alert in the if stmt as I was suspecting that the <strong>if stmt did not get executed.</strong>  This seems to be the case since I only get 2 alerts.  What do I miss?</p>
  
  <p>What I want to achieve is if a user select 'markasgone' option then when click on the GO button in a form, it will pop up a Bootstrap Modal asking for reasons otherwise just submit the form.</p>
  
  <p>Please help.  Thanks a ton in advanced.</p>
  
  <p>UPDATE: Thanks to Sergey for spotting the typo.  The problem I now have is the BootStrap Modal window is not shown.  The code I have is</p>
  
  <pre><code>&lt;button id="gobutton"&gt;Go&lt;/button&gt;  
  
  {% comment %}**** Modal ****{% endcomment %}
  &lt;div class="modal fade" id="reasonModal" tabindex="-1" role="dialog" aria-labelledby="reasonModalLabel" aria-hidden="true"&gt;
     &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
           &lt;div class="modal-header"&gt; &lt;h4&gt;Reason Please&lt;/h4&gt; &lt;/div&gt;
           &lt;div class="modal-body"&gt;
              &lt;p&gt; Please let us know your reasons: &lt;/p&gt;
              {% include "common/reasons.html" %}
           &lt;/div&gt;
           &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
  
              &lt;input type="submit" class="btn btn-default" name="confirm" value="Confirm"&gt;
           &lt;/div&gt;
        &lt;/div&gt;&lt;!-- /.modal-content --&gt;
     &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>