title: How do I make OnClick execute after OnClientClick in ASP.NET?
body: <p>I am working on an ASP.NET web forms application in C#. I have a button that needs to run some client-side Javascript (using the OnClientClick attribute), then run server-side code (using OnClick) if the client-side code returns true. I've done this plenty of times before with jQuery-ui confirmation dialogs, however this time my client-side code isn't a confirmation dialog and it isn't working -- the server-side (OnClick) event never gets triggered even though I'm explicitly returning true.</p>
  
  <p>Here's the client-side code in question, which is working (I've verified that it's returning the correct value with an alert() call):</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      //Function to hide edit fields
      function hideEditFields(retVal) {
          //Hide all edit divs
          var editName = document.getElementsByClassName("editField");
          for (i = 0; i &lt; editName.length; i++) {
              editName[i].style.display = 'none';
          }
          //Show all view divs
          var viewName = document.getElementsByClassName("viewField");
          for (i = 0; i &lt; viewName.length; i++) {
              viewName[i].style.display = 'block';
          }
  
          //Make investigated &amp; corrective action checkboxes non-highlighted
          $('&lt;%=cbInvestigatedY.ClientID%&gt;').removeClass("editable");
          $('&lt;%=cbInvestigatedN.ClientID%&gt;').removeClass("editable");
          $('&lt;%=cbCorrectiveY.ClientID%&gt;').removeClass("editable");
          $('&lt;%=cbCorrectiveN.ClientID%&gt;').removeClass("editable");
  
          //Show edit button
          var editButton = document.getElementById("editButton");
          editButton.style.display = 'block';
          //Hide save button
          var saveButton = document.getElementById("saveButton");
          saveButton.style.display = 'none';
  
          //alert("returning " + retVal);
          return retVal;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>And here's the button that calls this function:</p>
  
  <pre><code>&lt;asp:Button ID="btnSaveChanges" runat="server" OnClientClick="return 
      hideEditFields(true);" OnClick="btnSubmit_Click" Text="Save Changes" /&gt;
  </code></pre>
  
  <p>I've tried this with <code>UseSubmitBehavior="true"</code> and without, which seems to make no difference. I'm getting no errors in the Javascript console, and the Javascript code is doing what it's supposed to do, it's just not calling the server-side method.</p>
  
  <p>Here's how the submit button gets rendered (in view source) by ASP.NET:</p>
  
  <pre><code>&lt;input type="submit" name="ctl00$MainContent$btnSaveChanges" value="Save Changes"
      onclick="return hideEditFields(true);WebForm_DoPostBackWithOptions(new
      WebForm_PostBackOptions(&amp;quot;ctl00$MainContent$btnSaveChanges&amp;quot;, &amp;quot;&amp;quot;,
      true, &amp;quot;&amp;quot;, &amp;quot;&amp;quot;, false, false))"
      id="ctl00_MainContent_btnSaveChanges" /&gt;
  </code></pre>