Formbuilder Ajax support

[180michael]

Does anyone know a way to use frontend ajax for submitting formbuilder forms so that the entire page doesn't have to be reloaded? Thanks!

[180michael]

Well, this wasn't done anything with so I'll try again.

Does anyone know how to integrate frontend ajax with formbuilder? Thanks!

[kendo451]

This is not a trivial question with formbuilder, and thorough search of the forums does not reveal an answer, so I will elaborate.

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.

It would be far better to call a template that only outputs the form itself, saving you from downloading an entire HTML page with its stylesheets, scripts, etc, just to get the form results.

Unfortunately, FormBuilder does not have a "return_page" parameter to let you specify which page it should show the form in. It automatically includes the page id that called the form in the hidden fields so that it will package it in the regular template for that page - giving us all the extra load we don't want.

If you only have one page template for your site, then you could just use a get parameter like aj=1 in your action="" attribute of the form (using jquery), but if you have a footer form that is called from every page of the site, and this is multiple page templates, well, that is ridiculous to have to change all those templates into giant if-then-else structures.

So, here is a better way to do it:

1. Create a new Page Template, name it AJAX. It is very simple.

Code: Select all

{content}

That's all, no link to stylesheet, doctype, head, body or anything.

2. Create a new page called Form. On the options tab choose:

• Template = AJAX
  Show in menu = false
  Cachable = false
  Searchable = false
  WYSIWYG = false
  Active = true

In the content area put the call to your form, say a contact form for example:

Code: Select all

{FormBuilder form='contact'}

3. If you do not already have a global_content block or ScriptDeploy for your javascripts, then add one. You will need the following scripts in this order:

• Jquery 1.3 or higher
  Jquery Form plugin : http://malsup.com/jquery/form/#download
  ready.js wich I will show you in step 5

4. 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: Select all

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

5. Create the javascript file ready.js as follows:

Code: Select all

jQuery(document).ready(function(){

// create a jquery object so you don't have to do multiple searches for the same element
var contact_form = $('#ajax_form_wrap form');

 // pre-submit callback 
  function formValidate(formData, jqForm, options) { 
  
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    // var queryString = $.param(formData); 
 
    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 
 
    // alert('About to submit: \n\n' + queryString); 
 
    
    // if it validates Insert Throbber
    contact_form.fadeOut("slow", function(){$(".throbber").fadeIn("slow")});

   // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
 
    return true;
  };

  // Prepare form
    var options = { 
        target: '#ajax_form_wrap',  // target element(s) to be updated with server response 
        beforeSubmit: formValidate,  // pre-submit callback 
        type: 'post'
        // there are more options available, see jquery form plugin documentation
  	};
 
// IMPORTANT  use the Page ID for the "form" page on YOUR SITE. Mine was 81, yours is different
 // Change return page in hidden input to use the FORM ajax page (id=81)
 $('#ajax_form_wrap form input[name*=returnid]').attr('value','81');
// IMPORTANT use the page alias for the "form" page of YOUR SITE.  Mine was "form", your might be different.
 $('#ajax_form_wrap form input[name=page]').attr('value','form');
 
 // Change Form Action URL  and call AjaxForm
// Don't forget to change the domain and the page alias to match your website
 contact_form.attr('action','http://yourwebsite.com/index.php?page=form').ajaxForm(options);

});

6. Add the following line to your stylesheet

Code: Select all

.throbber { display:none; margin:40px auto; }

Now give it a try.

** Note: Formbuilder 0.6.4 has a bug that will prevent the values from being passed correctly if you have selected "display form inline". If the values in the results template display as "Array" you have triggered this bug. It is in Formbuilder, not in your javascript. ***

[clj83]

Im no expert with Ajax but I have been playing around abit with this method and have found that if you add,

?showtemplate=false

to the end of the 'Change Form Action URL' then you dont need to create a blank page or a blank template instead you can just use the default content block from the current contact page, aslong as you have the Formbuilder tag in your default content block within you page template.

I have also used abit of smarty to ensure I can whack the Ajax code on any page without having to manually change it.

So my script looks like this,

Code: Select all

{literal}
<__script__ type="text/javascript" src="/uploads/JS/jquery.form.js"></__script>

<__script__ type="text/javascript">
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}{$cgsimple->self_url()}{literal}?showtemplate=false').ajaxForm(options);

});
</__script>
{/literal}

[carasmo]

Can you provide more details on your method?

Do you create a standard contact form page? How are you capturing that id? What other modules are you using, if any?

Thanks!

[psy]

I'm not entirely sure I've followed this thread correctly, however have you tried the e.preventDefault() statement in jQuery?

Code: Select all

$('#mysubmitbutton').click(function(e) {
e.preventDefault();
// do what you want to do before the post
// then do your ajax post
// then on success, do want you want next, eg replace a <div> with the result or redirect, whatever.

});

e.preventDefault does exactly what it says - prevents the page from doing the default action, in this case submitting the form with the <form action="theformbuilderurl" and redirecting.

Then when you submit via jQuery ajax, the result is returned to the same page.