I am a fan of jquery and I am used to of it so I am going to use jquery as a library for examples I provide here. OK let’s start on how to make ajax form first. What we usually do is as follows.
First create a form
A simple form that accepts full name of the user.
<form id="ajaxform" method="post" action="action.php"> <input type="text" name="full_name" id="full_name" /> <input type="submit" name="submit" value="submit" /> </form>
Now js(ajax) part
$('#ajaxform').submit(function(){
$.ajax({
url:'action.php',
type:'POST',
data:'full_name='+$('#full_name').val(),
success:function(response){
if(response=='success')
{
alert('we have recieved your first name');
}
else
{
alert('something went wrong we are looking in to it');
}
}
});
return false;//returning false so that form is not submitted as we will be submitting it through js
});
OK now this is a simple ajax form that we did. For accessibility the question comes is how we handle data that is sent from js enabled browser and not enabled browser. However the request is sent to the action.php is both condition with the post data we will need to distinguish the request coming from the js enabled browser and the ones where js is not enabled. So what we do is add a parameter to the js data field and tell action.php that it is coming from the js enabled browser. please look at the difference in the js code below.
Now js(ajax) part
$('#ajaxform').submit(function(){
$.ajax({
url:'action.php',
type:'POST',
data:'full_name='+$('#full_name').val()+'&is_js_enabled=1',
success:function(response){
if(response=='success')
{
alert('we have recieved your first name');
}
else
{
alert('something went wrong we are looking in to it');
}
}
});
return false;//returning false so that form is not submitted as we will be submitting it through js
});
Now we can make action.php as follows
<?php
if(isset($_POST['is_js_enabled']))
{
//we will show user some fancy html here so that they don't just see success and failed text
if(isset($_POST['full_name']))
{
<div class="success">
<p>We got your full_name</p>
</div>
}
else
{
<div class="failed">
<p>We were not able to get your full_name</p>
</div>
}
}
else
{
//we will return success or failed message here
if(isset($_POST['full_name']) and $_POST['full_name']!='')
{
echo 'success';
}
else
{
echo 'failed';
}
}
OK all Done this can be your accessible Ajax web from now