jQuery AJAX

Send AJAX requests with this jQuery script.

by Brent Coder

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"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span>

  <span>        
        <label>Message: </label>
        <input type="text" name="html" placeholder="Howdy..." /><br />
        <label>Some Text: </label>
        <input type="text" name="sometext" placeholder="enter" />
    </span>

  <span>
        <label><img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.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 new_form_data = form_data.split('&');
    alert(new_form_data[1]);
    params = {};
    new_form_data.forEach (function (el) {
    var tmpArr = el.split('=');
    params[tmpArr[0]] = tmpArr[1];
    });
    alert(params['html']);
    alert(params['sometext']);
    alert(form_data);
    var form_url = $(this).attr("action");
 		var ajax = $(this).attr("ajax");
    
    var form_method = $(this).attr("method").toUpperCase();
    $("#loadingimg").show();

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

  });

});