jQuery AJAX

Send AJAX requests with this jQuery script.

by lise_nakache

HTML

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

  <span id="result"></span>


  <label>Message: </label>
  <input type="text" id="studentName" name="html" placeholder="Add Student">

  <input type="submit" value="Submit" />


</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").submit(function(e) {

    e.preventDefault();

    var form_data = $("form #studentName").val();
    var form_url = "/echo/html/";
    var form_method = "POST";


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

  });

});