AJAX Form Submission with Formbuilder

Suppose you want to use JQuery to have a contact form in your footer submit and show the results in the same spot without reloading the page. Simply using the JQuery form plugin, will fetch the entire page with the inline form result and try to pack it into your footer form container. This is a big waste of time and bandwidth. With CMS Made Simple, there is a cleaner faster way!

Suppose you want to use JQuery to have a contact form in your footer submit and show the results in the same spot without reloading the page.

Simply using the JQuery form plugin, it is going to fetch the entire page with the inline form result and try to pack it into your footer form container. This is a big waste of time and bandwidth.

Fortunately, CMS Made Simple has a url parameter "&SHOWTEMPLATE=false" which will output the {content} with nothing else.

So, here is how to do it:

1. You will need the following scripts in this order:

2. In the place on your page where you want the form to go, put a container with an id, and your formbuilder call inside of it:

Code:
<div id="ajax_form_wrap">
<div class="throbber"><img src="uploads/images/throbber.gif" alt="Sending..." /></div>
{FormBuilder form='contact'}
</div>

3. Add the following snippet of Javascript either in your template, or call it as an external javascript file. (If you use it directly in your page template, don't forget to wrap it in {literal} tags to prevent a SMARTY error.)

Code:
<script type="text/javascript" src="/uploads/JS/jquery.form.js"></script>
<script type="text/javascript">
{literal}
jQuery(document).ready(function(){

var contact_form = $('#ajax_form_wrap form');
  function formValidate(formData, jqForm, options) { 
    // var queryString = $.param(formData);
    // var formElement = jqForm[0];
    // alert('About to submit: \n\n' + queryString);
    contact_form.fadeOut("slow", function(){$(".throbber").fadeIn("slow")});
    return true;
  };

  // Prepare form
    var options = {
        target: '#ajax_form_wrap',  
        beforeSubmit: formValidate,  
        type: 'post'
     };

$('#ajax_form_wrap form input[name*=returnid]').attr('value','{/literal}{$content_id}{literal}');
$('#ajax_form_wrap form input[name=page]').attr('value','{/literal}{$page_alias}{literal}');

contact_form.attr('action','{/literal}{ldelim}$cgsimple->self_url(){rdelim}}{literal}?showtemplate=false').ajaxForm(options);

});
{/literal}
</script>

You will probably need to tweak some of the code for your form. But this simple method works pretty well for me.

ALL-INKL.COM - Webhosting Server Hosting Domain Provider

Comments