Submit to AJAX possible?

Hi all. I am looking for a way to use ChronoForms to implement something I already do fine in normal website/custom code, and could use some tips.

I have a email signup form that I am putting in the sidebar (as a module). On submit, I'd like to somehow submit the form using AJAX, so it doesn't reload the page, and populate a DIV with a success message that tells the user their email address was submitted. The AJAX call would be the piece that actually submits the form, too. I've not tried to use AJAX in Joomla before, so I don't know how doable it is to use my own PHP files for AJAX calls.

Anybody have any experience with this? Thanks...

Hi jenstechs,

ChronoForms is pretty AJAX friendly. You can use the extra code boxes in the Form HTML to hold the PHP and use task=extra in the calling URL.

Here's an example that has a little form with an AJAX call to check if a username exists. The Form HTML is:

<?php
/* ensure that this file is not called from another file */
defined('_JEXEC') or die('Restricted access');
global $mainframe;
$script  = "";
$script .= "
var uname = new LiveValidation('uname', {
  validMessage: 'This is a valid username',
  wait: 500
});
uname.add( Validate.Presence, {
  failureMessage: 'Username must not be blank!'
});
uname.add(
  Validate.Custom('uname', {
    against: function(value, args) {
    if ( value != '' ) {
      doJson(value);
    }
  },
  args: {},
  failureMessage: 'Username already in use!'
})
);

function doJson(value)
{
  var response = null;
  var url = 'index.php?option=com_chronocontact&chronoformname=test_form_17&task=extra&format=raw';
  var jSonRequest = new Json.Remote(url, {
  onComplete: function(r) {
    response = r.username_ok;
    console.log(response);
  }
}).send({'username': value});
return response;
};
";
?>

<fieldset><legend>Essential Information</legend>
<div class="form_item">
<table align="center" border="0" cellpadding="0" cellspacing="0"
    width="625">
    <tbody>
        <tr>
            <td align="right" width="90"><span class="cf_label">Account
            Name:</span></td>
            <td width="230"><input style="" rel="" id="uname"
                name="uname" class="cf_reg_input" title="" value=""
                type="text"></td>
            <td colspan="" class="formErr" align="left" valign="middle"><span
                id="indicator1" style="display: none"><img
                src="/images/hourglass.gif" alt="checking..." /></span></td>
            <td colspan="2" class="">
            <div id='username_msg'></div>
            </td>
        </tr>
    </tbody>
</table>
</fieldset>
<input type='submit' name='submit' value='submit' />

<?php
$doc =& JFactory::getDocument();
if ( $script ) {
    $script = "window.addEvent('domready', function() { $script }); ";
    $doc->addScriptDeclaration($script);
}
?>

and the Extra Code:

<?php
$json = stripslashes($_POST['json']);
$json = json_decode($json);

if ( $json->username ) {
  $db =& JFactory::getDBO();
  $query = "
    SELECT COUNT(*)
      FROM `#__users`
      WHERE `username` = ".$db->quote($json->username).";";
  $db->setQuery($query);
  $response = (bool) !$database->loadResult();
  $response = array('username_ok' => $response );
  echo json_encode($response);
}
?>

A few things to notice: this is using the MooTools 1.11 JSon code so MooTools must be loaded. I also have a LiveValidation in there that checks that the submitted field isn't empty (it coudl do more). And there's a format=raw in the AJAX url to make sure that only get the Json returned and not the whole Joomla template.

Bob