title: If submit button is clicked too quickly after its previous click, my jquery protection against it breaks
body: <p>I have a survey-type 'form'. What the user votes on changes, but the input stays the same. After they press submit, among other things, the new thing the user gets to vote on is to be loaded. If the submit button is pressed at a low frequency, my program works fine. However, if it is pressed too quickly, my program breaks. I am confused as to why that is, since I have played around with enabling/disabling the button at particular times in my code.</p>
  
  <p>Here is an excerpt of my HTML:</p>
  
  <pre><code>&lt;button id='submit-vote' disabled='disabled'&gt;Submit&lt;/button&gt;
  &lt;element class='change'&gt;&lt;INPUT id='hidden_id' TYPE='hidden' name='id' value='&lt;?php echo $id; ?&gt;'/&gt;&lt;/element&gt;
  </code></pre>
  
  <p>Here is script from my jquery (I don't know if this matters, but this is all written in between <code>&lt;/body&gt;</code> and <code>&lt;/HTML&gt;</code> tags, and not in between the <code>&lt;head&gt;</code> and <code>&lt;/head&gt;</code> tags.):</p>
  
  <pre><code>    &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $("#submit-vote").attr("disabled", false).data('disabled', false);
      });
  
      function loadListing()
      {
          var id = $('input:hidden[name=id]').val();
          $.get("controller.php",{/* [relevant values]*/}, 
          function(data)
          {
              if(data.response == 'success')
              {
                  //some code
                  var newId = $("&lt;INPUT id='hidden_id' TYPE='hidden' name='id' value='"+data.id+"'/&gt;");
                  $('#hidden_id').replaceWith(newId);
                  return true;
              }
              else
              {
                  //some code
                  return false;
              }
          }, "json");
      }
      jQuery(function($){
          $("#submit-vote").click( 
              function(){ 
                  if($(this).data('disabled') !== false )
                  {
                      return;
                  }
                  else
                  {
                      $(this).attr('disabled', true).data('disabled', true);
                      $.post('controller.php', {/*[relevant values]*/} , 
                      function(data)
                      {
                          if(data.response == 'success')
                          {
                              //code
                              loadListing();
                              $('#submit-vote').attr('disabled', false).data('disabled',false);
                              return true;
                          }
                          else
                          { 
                              //code
                              $('#submit-vote').attr('disabled', false).data('disabled',false)
                              return false; 
                          } 
                      }, "json"); 
                  }
              }
          );
      });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>: (I have updated my jquery to include code from the 1st answer to this question, and I have also included a bit more of my html). </p>
  
  <p>Here is my 'controller.php' excerpt. I have edited a lot of stuff out of it, so as only to include the important stuff. The important thing to know is that all of this usually works perfectly fine unless the submit button click is clicked very very frequently.:</p>
  
  <pre><code>if(!isset($_POST['poll']) &amp;&amp; !isset($_GET['newListing'])) //UPON PAGE LOAD
  {
      $activities = Activity::newActivitiesArrays($user_id);
      $_SESSION['activities'] = $activities;
      //more relevant code
      include('view.php');
  }
  if(isset($_POST['poll']) &amp;&amp; !isset($_GET['newListing'])) //submitting vote
  {   
      //relevant code using posted values
      $res = Activity::vote($user_id, $id, $vote);
      if( !$res )
      {
          echo json_encode(array("response"=&gt;"fail"));
      }
      else
      {
          echo json_encode( array("response"=&gt;"success"));
      }
  }
  if(isset($_GET['newListing']) &amp;&amp; isset($_GET['id'])) //getting something different to display
  {
      $id = $_GET['id'];
      $activities = $_SESSION['activities'];
      list($acts, $links, $ids) = $activities;
      $keys = array_keys($ids, $id);
      $key=$keys[0];
      if(!$key)
      {
          echo json_encode( array("response"=&gt;"failure"));
      }
      else
      {
          //relevant code
          unset($_SESSION['activities']);
          $_SESSION['activities'] = $activities;
          echo json_encode( array("response"=&gt;"success"));
      }
  }
  </code></pre>
  
  <p>Any help/suggestions appreciated.</p>