jQuery AJAX

StackOverflow - 1 - Stop browser locking during (synchronous) Ajax?

by Muhammad Mushtaq Sheikh

HTML

<script src="http://fonts.googlepis.com/css?famaily=Open+Sans:400,700"></script>
<form method="post" action="/echo/html/" ajax="true">

<span id="result">jQuery + AJAX form submit script.</span>

  <span>        
        <label>Message: </label>
        <input type="text" name="html" placeholder="Howdy..." />
    </span>

  <span>
        <label><img id="loadingimg" src="https://s17.postimg.org/3jm0vyy3j/ajaxloader.gif"/>   </label>
        <input type="submit" value="Submit" />      
    </span>

</form>

CSS

body {
  font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 13px;
}

form span {
  display: block;
  margin: 10px;
}

label {
  display: inline-block;
  width: 100px;
}

input[type="text"] {
  border: 1px soild #ccc;
  width: 200px;
  padding: 5px;
}

input[type="submit"] {
  padding: 5px 15px;
}

span#result {
  padding: 5px;
  background: #ff9;
}

img#loadingimg {
  display: none;
}

JavaScript

$(document).ready(function(e) {

  $("form[ajax=true]").submit(function(e) {

    e.preventDefault();

    var form_data = $(this).serialize();
    var form_url = $(this).attr("action");
    var form_method = $(this).attr("method").toUpperCase();

    $("#loadingimg").show();

    $.ajax({
      url: form_url,
      type: form_method,
      data: form_data,
      async: false,
      cache: false,
      success: function(returnhtml) {
        $("#result").html(returnhtml);
        $("#loadingimg").hide();
      }
    });

  });

});