title: How to avoid multiple AJAX calls?
body: <p>I'm submitting a form via AJAX using the code below:</p>
  
  <pre><code>$( 'form' ).submit(function(e) {
  
      $.ajax({
          type: 'POST',
          url: ajax_url,
          dataType: 'json',
          data: {
              'action': 'my_action',
              'str': $( 'form' ).serialize()
          },
          success: function( data ) {
              // Do something here.
          },
          error: function( data ) {
              // Do something here.
          }
      });
      return false;
  });
  </code></pre>
  
  <p><strong>Background</strong></p>
  
  <p>My PHP handler carries out various tasks and then sends back a response. I can then do something with <code>data</code> in either of the success or error functions. </p>
  
  <p><strong>My problem</strong></p>
  
  <p>When a user double clicks on the form's submit button, two AJAX calls take place which causes the code inside my PHP handler to execute twice. </p>
  
  <p><strong>My question</strong></p>
  
  <p>How can I avoid my code being executed twice if a user double clicks on submit?</p>