What?
This is an article to demo the crudest form which uses Joomla's version 2.5 core mootools (uncompressed?). This is intended for absolute novices (like me) who just want to see an example of an AJAX form within Joomla 1.6.x - 2.5.x in it's most basic state. At time of print, I am using this with Joomla 2.5.6.

Why?
The examples of the official site (mootools.net) did not work in my Joomla environment nor did most people's examples across the web. All I wanted was a basic example to show me how to send a form asynchronously (ie. running in the background without loading a new page).

How?
This form is more AJ than AJAX as I don't even use an XML file. You'll need to create a receiving file that sends back the data, in my case, I've called it ajax.form.php and the contents of which are:

  1.  
  2.  print "
    1.  ".print_r($_POST, true)." 
    2.  
    3.  
     
  3.  
"; 
  •  ?> 
  • This just prints back an array of data that was sent to it; obviously you may want to tidy this up but the more basic the receiving data the better. In my example, I'm returning some HTML but for security and stability, you will want this to use an XML file depending on the level of detail you want back.

    The biggy
    The following code is basically the least amount of code (or near enough) you will need to get this to work:
    1.   
    2.   
    3.   
    4.   
    5.   
    6.   
    7.  window.addEvent('domready', function() { 
    8.  $('myForm').addEvent('submit', function(e) { 
    9.   
    10.  // Prevents the default submit event from loading a new page. 
    11.  e.stop(); 
    12.   
    13.  // Set the options of the form's Request handler. 
    14.  // ("this" refers to the $('myForm') element). 
    15.  this.set('send', { 
    16.  onComplete: function(response) { 
    17.  $('log').set('html', response); 
    18.  } 
    19.  }); 
    20.   
    21.  // Send the form. 
    22.  this.send(); 
    23.  }); 
    24.  }); 
    25.   
    26.     
    27.     
    28.    .aCoupleOfDivs { 
    29.    background-color:#efefef; 
    30.    border:2px solid #ccc; 
    31.    width:300px; 
    32.    float:left; 
    33.    } 
    34.     
    35.    Basic Mootools Form in Joomla 2.5 
    36.   
    37.   
    38.   
    39.    

      Basic Mootools Form in Joomla 2.5

       
    40.     
    41.       
    42.        
       
    43.          

      Name:

       
    44.           
    45.        
     
  •        
     
  •          

    E-Mail:

     
  •          This email address is being protected from spambots. You need JavaScript enabled to view it." /> 
  •