Wednesday, November 5, 2014

HOW TO: AJAX form submission with Google App Engine

Form:

<form id="loginForm"  >

<label for="loginEmail">Email:</label>
<input type="email" name="usrEmail"  id="loginEmail"  autocapitalize="none" />
                    
<div  style="width:100%; height: 8px;"></div>
                    
<label for="loginPassword">Password: </label>
<input type="password" name="usrPassword" id="loginPassword"   autocapitalize="none" style="width:145px;"/>
<div  style="width:100%; height: 20px;"></div>
<div align="center">
<input type="submit" id="loginSubmitButton"  data-mini="true" data-inline="true" data-theme="b"  value="LOGIN" >
</div>

</form>



Javascript:

$(document).ready(function() { 

$("#loginSubmitButton").on("click", function() 
{

    var formServlet = "/form/loginUserForm"; 

    $.ajax({
           type: "POST",
           url: formServlet,
           data: $("#loginForm").serialize(),
           success: function(data)
           {
                alert("done");
           }
         });

     return false;
    });


});