Submit a jQuery Mobile form via AJAX with PHP
index.html:
=========
<html !doctype>
<html>
<head>
<title>Submit a form via AJAX</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css">
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
<script>
function onSuccess(data, status)
{
data = $.trim(data);
$("#notification").text(data);
}
function onError(data, status)
{
// handle an error
}
$(document).ready(function() {
$("#submit").click(function(){
alert(1);
var formData = $("#callAjaxForm").serialize();
alert(formData);
$.ajax({
type: "POST",
url: "http://localhost/pdm/callajax.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
});
</script>
</head>
<boby>
<!-- call ajax page -->
<div data-role="page" id="callAjaxPage" data-url="callAjaxPage" class="ui-page ui-body-c ui-page-active">
<div data-role="header" class="ui-bar-a ui-header" role="banner">
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Call Ajax</h1>
</div>
<div data-role="content" class="ui-content" role="main">
<form id="callAjaxForm">
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="firstName" class="ui-input-text">First Name</label>
<input type="text" name="firstName" id="firstName" value="" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c">
<label for="lastName" class="ui-input-text">Last Name</label>
<input type="text" name="lastName" id="lastName" value="" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c">
<h3 id="notification"></h3>
<div data-theme="b" class="ui-btn ui-btn-up-b ui-btn-corner-all ui-shadow" aria-disabled="false"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Submit</span></span><button data-theme="b" id="submit" type="submit" class="ui-btn-hidden" aria-disabled="false">Submit</button></div>
</div>
</form>
</div>
<div data-role="footer" class="ui-bar-a ui-footer" role="contentinfo">
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">GiantFlyingSaucer</h1>
</div>
</div>
<div class="ui-loader ui-body-a ui-corner-all" style="top: 326.5px;"><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div>v
</body>
</html>
callajax.php :
=========
<?php
$firstName = $_POST["firstName"];
$lastName = $_POST["lastName"];
echo("First Name: " . $firstName . " Last Name: " . $lastName);
?>
Thanks for Ref:
http://www.sitepoint.com/50-jquery-mobile-development/
No comments:
Post a Comment