A guestblog from the Dutch forum member Guido, also known as the developer of the ACE Editor 2 module for CMSMS™.

As someone who tries to stay away from jQuery solutions (not because I think jQuery is bad, it is very good) I worked out a way to submit a form AJAX-style in CMS Made Simple™. Let me walk you through the steps.

Note: I will not be demonstrating the steps for creating a form (I recommend using FormBuilder), since this is outside of the scope for this tutorial. I will, however explain which parts of the code are ‘custom’ and should be adapted to your situation.

  How to use

STEP 1

What this does:

It takes a wrapping div called ‘product_quote’ (adjust to your wrapping div’s id) and gets the form element inside (generated by your {FormBuilder} tag), and places it in a variable called ‘pQuote’. You can adjust this var name, but remember to rename all other instances as well.

STEP 2

What this does:

It takes the previously created ‘pQuote’ var (your form) and changes the action parameter (what happens when you submit the form). It sets it to the URL of the current page (‘window.location.href’) and adds ‘?showtemplate=false’ to it. This is where CMSMS comes in. The added parameter ‘?showtemplate=false’ tells CMSMS to only give back the {content} tag’s content and not use the page template. This allows you to use FormBuilders ‘Sent Template’ as a standard text to show visitors on form submission.

The code above assumes you use pretty urls at your website.
If not, change ‘?showtemplate=false’ to ‘&showtemplate=false’

STEP 3

What this does:

It takes the previously created ‘pQuote’ var (your form) and adds an ‘onsubmit’ handler. Basically: something that happens when you click ‘submit’ (or submit by pressing ENTER). It then executes a function that passes in the ‘e’ variable (the submitting event).

Now look at this line:

The ‘serialize’ function is not a standard JavaScript function, I will provide the code for this function at the end. You should include it on your page via a template, HTML block or separate JS file. What this does is, it takes the form and prepares the data on it to be sent through JavaScript's native AJAX method. jQuery has a similar function built-in.

The code above assumes you use pretty urls at your website.
If not, change ‘?showtemplate=false’ to ‘&showtemplate=false’

STEP 4

Now look at this part of the code:

What this does:

This is the native JavaScript way of sending an AJAX request (jQuery wraps its own function around this, but basically it’s the same thing). We create a request and store it in variable called ‘r’. We then use the standard ‘onreadystatechange’ event (a handler that listens to the request and knows when it changes) to know when the request is complete and successfull when readyState is ‘4’ and status is ‘200’.

When a native JavaScript AJAX call is completed, it will send back the response in a variable called ‘responseText’ and attach it to the ‘r’ object (our request object). We use a self-written function called ‘showResponse’ to handle this data.

After that, we open the request (‘r.open’) and tell it we want to use POST (standard for form submission), where we want to post to (again, the same URL as we used to update the ‘action’ parameter of the form).

We set the request header to make sure the data is handled correctly and lastly, we send the data we serialized in step 3.

Lastly, but important: We use the ‘e’ variable we set-up earlier and use the method ‘preventDefault()’ on it. Remember the ‘e’ was the submitting event? We don’t want to use the default action, which is point the browser to the ‘action’ parameter of the form (which would show us the FormBuilder's ‘Send Template’ without further markup from a page template).

STEP 5

What this does:

This is a separate function that handles the response (the text we set in FormBuilder's ‘Sent Template’ section of our form). It uses a variable called ‘r’ (not to be confused with the ‘r’ variable we used for the request, this is the response. It gets an element called ‘quote_response’). You can get any other element on your page you want, so change this ID to the one you need.

It then sets the response from the FormBuilder module to be the inner HTML (so content) of your response DIV.
TIP: you could also change the ID here to the form-wrapping DIV ID. It will then replace your form with the response-text.

In my case, I wanted to show the response div for 5 seconds. So I used some self written functions that adds an ‘active’ class, and removes it 5 seconds later. I then used CSS to style the 'active' and ‘inactive’ state.

ALL TOGETHER

In the page above, it all comes together, with one addition: it’s all wrapped in a function called ‘sendAjaxForm’. This function is then called after.

Extra functions

The helper functions I wrote (or took from StackOverflow, thank you) you need for this are:

Serialize

  3 Comments