Basic Joomla 2.5 Mootools Form

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.

The examples of the official site ( 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).

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:
print "<pre>".print_r($_POST, true)."</pre>";
  1.  <?php 
  2.  print "<pre>".print_r($_POST, true)."</pre>"
  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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
	<script type="text/javascript" src=""></script>
	<script type="text/javascript">

		window.addEvent('domready', function() {
			$('myForm').addEvent('submit', function(e) {

				// Prevents the default submit event from loading a new page.

				// Set the options of the form's Request handler.
				// ("this" refers to the $('myForm') element).
				this.set('send', {
					onComplete: function(response) {
						$('log').set('html', response);

				// Send the form.

  <style type="text/css">
  .aCoupleOfDivs {
	  border:2px solid #ccc;
  <title>Basic Mootools Form in Joomla 2.5</title>

  <h1>Basic Mootools Form in Joomla 2.5</h1>
  <form id="myForm" action="ajax.form.php" method="post">
    <div id="form_box" class="aCoupleOfDivs">
        <input type="text" name="u_name" value="John Smith" />
        <input type="text" name="e_mail" value="" />
        <p>Sample CheckBox:</p>
         <input type="checkbox" name="sample_checkbox" value="yes" checked="checked" />
        <p>Sample SelectList:</p>
            <select name="sample_selectlist">
              <option value="yes" selected="selected">yes</option>
              <option value="no">no</option>
      <input type="submit" name="button" />

  <div id="log" class="aCoupleOfDivs">
	<!-- returned results to show here (replaces contents of this div) //-->
    <h3>Ajax Response</h3>
    <p>Ready, Willing and Able</p>

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> 
  2.  <html xmlns="" xml:lang="en" lang="en"> 
  3.  <head> 
  4.      <script type="text/javascript" src=""></script> 
  5.      <script type="text/javascript"> 
  7.          window.addEvent('domready', function() { 
  8.              $('myForm').addEvent('submit', function(e) { 
  10.                  // Prevents the default submit event from loading a new page. 
  11.                  e.stop()
  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.                  })
  21.                  // Send the form. 
  22.                  this.send()
  23.              })
  24.          })
  26.    </script> 
  27.    <style type="text/css"> 
  28.    .aCoupleOfDivs { 
  29.        background-color:#efefef; 
  30.        border:2px solid #ccc; 
  31.        width:300px
  32.        float:left; 
  33.    } 
  34.    </style> 
  35.    <title>Basic Mootools Form in Joomla 2.5</title> 
  36.  </head> 
  37.  <body> 
  39.    <h1>Basic Mootools Form in Joomla 2.5</h1> 
  40.    <form id="myForm" action="ajax.form.php" method="post"> 
  41.      <div id="form_box" class="aCoupleOfDivs"> 
  42.        <div> 
  43.          <p>Name:</p> 
  44.          <input type="text" name="u_name" value="John Smith" /> 
  45.        </div> 
  46.        <div> 
  47.          <p>E-Mail:</p> 
  48.          <input type="text" name="e_mail" value="jsmith&#64;" /> 
  49.        </div> 
  50.        <div> 
  51.          <p>Sample CheckBox:</p> 
  52.           <input type="checkbox" name="sample_checkbox" value="yes" checked="checked" /> 
  53.        </div> 
  54.        <div> 
  55.          <p>Sample SelectList:</p> 
  56.              <select name="sample_selectlist"> 
  57.                <option value="yes" selected="selected">yes</option> 
  58.                <option value="no">no</option> 
  59.              </select> 
  60.        </div> 
  61.        <input type="submit" name="button" /> 
  62.      </div> 
  63.    </form> 
  65.    <div id="log" class="aCoupleOfDivs"> 
  66.      <!-- returned results to show here (replaces contents of this div) //--> 
  67.      <h3>Ajax Response</h3> 
  68.      <p>Ready, Willing and Able</p> 
  69.    </div> 
  72.  </body> 
  73.  </html> 

Big Note: UPDATE 2012
It is important to refer to the correct mootools scripts in order for this to work. Unfortunately, clients who sign up to template providers who disallow access to their support forums after the subscription period expires are on the rise. I'm going to annoy them all by posting solutions here:
  • for Joomla 1.6.x - 2.5.x: Out-of-the-box template:
    <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
    <script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
    -- add subfolder if this is not in the root of the domain:
    -- eg. has file in
    -- <script src="/joomla25/media/system/js/mootools-core.js"... >
    -- also note that this form can work with simply the core mootools script
    -- but does not include the validation that is in the more mootools script.
    1.  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script> 
    2.  <script src="/media/system/js/mootools-more.js" type="text/javascript"></script> 
    4.  -- add subfolder if this is not in the root of the domain: 
    5.  -- eg. has file in 
    6.  -- <script src="/joomla25/media/system/js/mootools-core.js"... > 
    8.  -- also note that this form can work with simply the core mootools script 
    9.  -- but does not include the validation that is in the more mootools script. 
  • for Yootheme: Warp 6: Yootheme template:
    <script src="/media/system/js/mootools-core-uncompressed.js" type="text/javascript"></script>
    <script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
    -- note that Yootheme warp does not include the mootools-more.js file:
    -- reminder: check for conflicts
    1.  <script src="/media/system/js/mootools-core-uncompressed.js" type="text/javascript"></script> 
    2.  <script src="/media/system/js/mootools-more.js" type="text/javascript"></script> 
    4.  -- note that Yootheme warp does not include the mootools-more.js file: 
    5.  -- reminder: check for conflicts 

Additional Notes
You have no idea how long it has taken me to get this code in working order and as easy as it may be to others, this has been quite a challenge. I have tried so many examples, testing different mootools libraries to see why the Joomla ones weren't working. It may not be right, it may not be the best or optimized order but it works for me and that's pretty much all I needed.
  • Change - Yeah note the URL to the mootools-core-uncompressed.js file, if you have this enabled in Joomla then you already have this and don't need to include it again (just view the source of your webpage that this form will be on).
  • Does not use JQuery - Although most of the sites I work for use JQuery as well as MooTools, I needed this for a component that I was building and only wanted to use the files that Joomla versions 1.6 to 2.5 included in their basic install (vanilla/out-of-the-box).
  • Will not work with Joomla 1.5 or less - Not 100% sure about this but I tried the example in the Official Joomla Documentation and I couldn't get it to work. They even add a note to say that Joomla 1.6 uses a different version of Mootools and handles forms differently.

Almost forgot this, you can view my example at: Note the receiving file is a PHP file and the contents were mentioned previously in this article (-> see ajax.form.php).
Category: Joomla :: Article: 429

Credit where Credit is Due:

Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman

Related Articles

Joes Revolver Map

Joes Word Cloud


Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Donate to Joel Lipman via PayPal

Donate to Joel Lipman with Bitcoin bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2023 Joel Lipman .com. All Rights Reserved.