6:04 PM
1code
Create a Form and AJAX
Create simple registration form (Name, Address, City , Telp , Email). All input required, AJAX will return a response used to display success , error messages. Multi-field registration form will submit with Ajax<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Form</title>
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#myForm').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
</script>
<style type="text/css">
body, table, input, select, textarea { font: 11px/20px Verdana, sans-serif; }
h4 { font-size: 18px; }
input { padding: 3px; border: 1px solid #999; }
td { padding: 5px; }
#result { background-color: #F0F1EE; border: 1px solid #215800; padding: 10px; width: 400px; margin-bottom: 20px; }
</style>
</head>
<body>
<h4>SIMPLE AJAX Form</h4>
<div id="loading" style="display:none;"><img src="loading.gif" alt="loading..." /></div>
<div id="result" style="display:none;"></div>
<form id="myForm" method="post" action="proses.php">
<table>
<tr>
<td width="100">Name</td>
<td>
<input name="name" size="30" type="text" />
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input name="address" size="40" type="text" />
</td>
</tr>
<tr>
<td>City</td>
<td>
<input name="city" size="40" type="text" />
</td>
</tr>
<tr>
<td>Telp</td>
<td>
<input name="no_telp" size="30" type="text" />
</td>
</tr>
<tr>
<td>E-mail</td>
<td>
<input name="email" id="email" size="30" type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
Create PHP script for form processing
<?php
if (trim($_POST['name']) == '') {
$error[] = '- The name field is required.';
}
if (trim($_POST['address']) == '') {
$error[] = '- The address field is required.';
}
if (trim($_POST['city']) == '') {
$error[] = '- The city fields is required';
}
if (trim($_POST['telp']) == '') {
$error[] = '- Telp fields is required';
}
if (trim($_POST['email']) == '') {
$error[] = '- Email fields is required';
}
if (isset($error)) {
echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
/*
insert SQL Query here
*/
$data = '';
foreach ($_POST as $k => $v) {
$data .= "$k : $v<br />";
}
echo '<b>Form successfully submited:</b><br />';
echo $data;
}
die();
?>
Posted in: 
0 comments:
Post a Comment