AJAX, WEB 2.0 and Accessibility - a tutorial

Tutorial Menu

• Home Page
• Basic AJAX - Creating an AJAX class
• Basic AJAX - Calling the AJAX class
• Basic AJAX - Making the AJAX class more accessible
• Basic AJAX - Incorporating alternatives
• Basic AJAX - Best Practice
• Common uses
• Submitting a form
• Dynamically Displaying Content

Submitting A Form

The principle of submitting the form suggests that data can be sent to the server, processed and a response sent. Normally sending data to server can be done through a get or post request. To simplify this tutorial I will send a get string to the server. This can be done by modifying the makecall function. To convert the form being sent into a get string I have created the following getForm function

function getForm(theFormName) {
  if(theFormName==null){
    return null;
  }else{
    theForm = document.forms[theFormName];
    var qs = ''
    for (e=0;e<theForm.elements.length;e++) {
     if (theForm.elements[e].name!='') {
      var name = theForm.elements[e].name;
      qs+=(qs=='')?'?':'&'
      if(theForm.elements[e].type == "checkbox"){
        qs+= name+'='+escape(theForm.elements[e].checked);
      }else{
        qs+= name+'='+escape(theForm.elements[e].value);
      }
    }
  }
  qs+="\n";
  return qs;
  }
}

The make call will now send the information to the pae that receives the function. The function is also included in the page so if the get request went to the page it would also get processed. I.e if AJAX was off.

function makeCall(){
  var myAJAX= new AJAXClient();
  myAJAX.isAsync=true;
  myAJAX.callback= function(result){
   var oldspan=document.getElementById('result');
   var newspan=document.createElement('p');
   newspan.setAttribute('id' , 'result');
   newspan.appendChild(document.createTextNode(myAJAX.xmlhttp.responseText));
   oldspan.parentNode.replaceChild(newspan,oldspan);
   document.getElementById('result').style.backgroundColor='yellow';
  }
  qs=getForm('convertForm');
  myAJAX.makeRequest('result.php'+qs, null);
  return false;
}

The script updates the paragraph after sending the get data to result.php.

The page content is as follows

<div id="converter">
 <form action="subForm.php" name="convertForm"  id="convertForm" 
                                                           method="get">
  <p>£GBP:<input type="text" class="text" name="GBP" 
                                              value="1" size="5" /></p>
  <p><input type="submit" name="convert" value="Convert" id="convert" /></p>
 </form>				
</div>
<p id="result">
 <?php 
   include('result.php');
 ?>
</p>

The use of result.php in this way reduces the repetition of writing the function.

<?php
if(isset($_GET['GBP']) && is_numeric($_GET['GBP']) ){
$u=$_GET['GBP']*1.9;
echo '$'.$u;
}
?>

See example

Previous: Common uses Next:Dynamically Displaying Content