Using jQuery and the form and validate plugins, it is simple to add unobtrusive ajax to your existing form page
1, Modify your existing form page
- Add
<input type="hidden" name="isAjax" id="isAjax" value="0" />to your form. This field will tell the processing script, process_input.php in my example, if the values in the form were submitted using ajax or as an ordinary form submit, defaulting to isAjax = 0 (false). - Add
class="required"to the fields that requires input - Add the
<div id="result"></div>where you want the ajax output
<form id="form1" name="form1" method="post" action="process_input.php"> <input type="hidden" name="isAjax" id="isAjax" value="0" /> Name: <input type="text" name="name" class="required" id="name" value="" /> <br /> <input type="submit" name="submit" id="submit" value="submit" /> </form> <div id="result"></div>
2, update your process_input.php code
The process_input.php, uses the value in isAjax to decide how output is displayed
<?php
if ($_POST['isAjax']) {
// out will be return, using ajax, to the calling form page
echo "Hello " . $_POST['name'];
} else {
// no javascript, this page will do the output
echo "<h1>Welcome</h1>";
echo $_POST['name'];
}
?>
3, Add the jQuery code
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.38"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){ // wait until the page is loaded before executing the jQuery code
var v = $("#form1").validate({ // enable form validation
submitHandler: function(form) {
$("#isAjax").val(1), // set the hidden input isAjax to 1 (true)
$(form).ajaxSubmit({ // submit the form using ajax
target: "#result" // put output from process_input.php into <div id="result"></div>
});
}
});
});
</script>
Here’s the complete form page
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.38"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var v = $("#form1").validate({
submitHandler: function(form) {
$("#isAjax").val(1),
$(form).ajaxSubmit({
target: "#result"
});
}
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="process_input.php">
<input type="hidden" name="isAjax" id="isAjax" value="0" />
Name: <input type="text" name="name" class="required" id="name" value="" /> <br />
<input type="submit" name="submit" id="submit" value="submit" />
</form>
<div id="result"></div>
</body>
29.5.2011 at 16:34
A very good example. Simple yet conveys the message in a big way. I learn something Today.