title: HTML form with Ajax sending form multiple time
body: <p>I created a Contact Form and added few events in it using Ajax but when i submit my form it says</p>
  
  <pre><code>XHR finished loading: "localhost/mysite/contact-us".
  XHR finished loading: "localhost/mysite/contact-us".
  XHR finished loading: "localhost/mysite/contact-us".
  XHR finished loading: "localhost/mysite/contact-us". 
  </code></pre>
  
  <p>I have no idea why it is doing so but here is my Ajax code <strong>[UPDATED AFTER EDIT]</strong></p>
  
  <pre><code>$("#success-alert").hide();
      $("#error-alert").hide();
      $('button').click(function(){
      $('input').each(function() {
      if(!$(this).val()){
         $("#error-alert").show();
         $("#success-alert").hide();
         return false;
  }
  else
  {
  $('document').ready(function() {
  var form = $('#contact_us'); // contact form
  var submit = $('button');  // submit button
  var status = $('#form-status'); // alert div for show alert message
  
  // form submit event
  form.on('submit', function(e) {
  e.preventDefault(); // prevent default form submit
  
  $.ajax({
    url: '/contact-us', // form action url
    type: 'POST', // form submit method get/post
    dataType: 'html', // request type html/json/xml
    data: form.serialize(), // serialize form data 
    beforeSend: function() {
      submit.html('Sending....'); // change submit button text
    },
    success: function(data) {
      form.trigger('reset'); // reset form
      $("#success-alert").show();
      $("#error-alert").hide();
      submit.html('Send'); // reset submit button text
  
    },
    error: function(e) {
      console.log(e)
    }
  
  });
  });
  });
  }
  });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h3&gt;Contact Us&lt;/h3&gt;
    &lt;form method="POST" action="/contact-us"class="static-contact-us styled" data-abide id="contact_us"&gt;
      &lt;div class="row input-row"&gt;
        &lt;div class="large-3 columns"&gt;
          &lt;label class="inline"&gt;First Name&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="large-9 columns"&gt;
          &lt;input type="text" name="first_name" required&gt;
          &lt;small class="error"&gt;First name is required&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row input-row"&gt;
        &lt;div class="large-3 columns"&gt;
          &lt;label class="inline"&gt;Last Name&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="large-9 columns"&gt;
          &lt;input type="text" name="last_name" required&gt;
          &lt;small class="error"&gt;Last name is required&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row input-row"&gt;
        &lt;div class="large-3 columns"&gt;
          &lt;label class="inline"&gt;Phone Number&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="large-9 columns"&gt;
          &lt;input type="text" name="phone" required&gt;
          &lt;small class="error"&gt;Phone number is required&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row input-row"&gt;
        &lt;div class="large-3 columns"&gt;
          &lt;label class="inline"&gt;E-Mail&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="large-9 columns"&gt;
          &lt;input type="text" name="email" required&gt;
          &lt;small class="error"&gt;E-Mail is required&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row input-row"&gt;
        &lt;div class="large-3 columns"&gt;
          &lt;label class="inline"&gt;Subject&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="large-9 columns"&gt;
          &lt;input type="text" name="subject"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row input-row"&gt;
        &lt;div class="large-3 columns"&gt;
          &lt;label class="inline"&gt;Question&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="large-9 columns"&gt;
          &lt;textarea name="question"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="large-3 columns"&gt;&amp;nbsp;&lt;/div&gt;
        &lt;div class="large-9 columns"&gt;
          &lt;button type="submit"&gt;Send&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
    &lt;div id="form-status"&gt;
    &lt;div id="success-alert" data-alert class="alert-box success radius"&gt;
    Thanks for contacting us!
  &lt;/div&gt;
    &lt;div id="error-alert" data-alert class="alert-box alert radius"&gt;
          An error occurred. Try again later.
  &lt;/div&gt;
  
    &lt;div id="form-status"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>
    </p>
  
  <p>NOTE: HTML Seems fine to me but also i added the complete Ajax now. It may be problem due to if condition.</p>