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

  1. 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).
  2. Add class="required" to the fields that requires input
  3. Add the <div id="result"></div> where you want the ajax output

[sourcecode language="html"]
<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>
[/sourcecode]

2, update your process_input.php code

The process_input.php, uses the value in isAjax to decide how output is displayed

[sourcecode language="php" htmlscript="false"]
<?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'];
}
?>
[/sourcecode]

3, Add the jQuery code

[sourcecode language="javascript"]
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="https://github.com/malsup/form/raw/master/jquery.form.js?v2.38"></script>
<script type="text/javascript" src="https://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>
[/sourcecode]

Here's the complete form page

[sourcecode language="javascript"]
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="https://github.com/malsup/form/raw/master/jquery.form.js?v2.38"></script>
<script type="text/javascript" src="https://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>
[/sourcecode]