jQuery and ExpressionEngine Form Processing

Jul 26
2010
jQuery and ExpressionEngine Form Processing

My First post since starting Hippo! Things have been chaotic with client work and just simply not had time!

Working on an EE site recently, I had to set up a multi-stage member signup process, whereby the user registered and then went through a series of different screens to fulfil a number of options.

Having tried the numerous suggested ways from twitter and the various plugins/addons which offer the answer (and failed) – I decided to switch to my trusty jQuery to accomplish the task.

And so, in true EE Community style – here’s how I accomplished the job, I hope it’ll help some of you in the future.

Ok, so include your jQuery files and I always separate my jQuery from the page in a /js/common.js, but you can put it wherever you want.

Create your member signup form etc…

<form id="register_member_form" method="post" action="/">
<input type="hidden" name="XID" value="{XID_HASH}" />
<input type="hidden" name="ACT" value="10" />
<input type="hidden" name="RETURN_URL" id="RETURN_URL" value="/LINK/TO/NEXT/STEP" />
Your Name :<br />
<input name="screen_name" type="text" size="45" />
<!-- </label> -->
<br /><br />
Email :<br />
<input name="email" type="text" size="45" />
<br /><br />
Your Company :<br />
<input name="m_field_id_12" id="company" type="text" size="45" />
<br /><br />
<input type="button" id="reg_submit" value="Register" />
</form>

Notice, there’s no ‘submit’ button there – I’ve purposely removed it on this example, because the registration was irrelevant if javascript wasn’t enabled, so if you do have a user which doesn’t have JS enabled, you simply have to tell them the registration wont work with a <noscript> etc.

So, in your /js/common.js file (or wherever you’re putting your jQuery), you just need to put a handler to intercept the click of that button:

$(document).ready(function(){
$("#reg_submit").click(function(){

})
})

Next step, is now to ‘post’ the form using jQuery – as follows:

$(document).ready(function(){
$("#reg_submit").click(function(){

$.ajax({
type: 'POST', //We're telling jQuery we're doing a POST.
url: '/',
data: $("#register_member_form").serialize(), // This encapsulates all the form data and passes it as FORM_DATA.
success: function(data){
// Now we need to do something with the data that ExpressionEngine sends back!
}
})
return false; // Make sure we return false.

})
})

And Hey Presto! We now have jQuery executing the form on the fly, without redirecting the user anywhere. The problem is now that we don’t know for definite whether the form post was successful or not.

So we need to add another level now to query the returned data. To accomplish this, I’m searching the returned data for certain keywords and then acting accordingly as follows:

if (data.search(/error/) >= 0) // Check to see if the word 'error' occurs in the returned data.
{
var $data = $(data);

var err = "There were errors found in your entry:\n";

$data.find('li').each(function() { // Check each instance of the <li> in the returned data and iterate through.
err+= "\t" + $(this).text() + "\n";
});

alert(err); // Alert the Error which will detail all the values of the <li> (i.e the errors!)
}
else
{
location.replace( $("#RET").val() ); // There was no error, so we're going to redirect the user to the next step now (set in the RETURN_URL form field)
}

so, the complete code now looks like this:

$(document).ready(function(){
$("#reg_submit").click(function(){

$.ajax({
type: 'POST', //We're telling jQuery we're doing a POST.
url: '/',
data: $("#register_member_form").serialize(), // This encapsulates all the form data and passes it as FORM_DATA.
success: function(data){
if (data.search(/error/) >= 0) // Check to see if the word 'error' occurs in the returned data.
{
var $data = $(data);

var err = "There were errors found in your entry:\n";

$data.find('li').each(function() { // Check each instance of the <li> in the returned data and iterate through.
err+= "\t" + $(this).text() + "\n";
});

alert(err); // Alert the Error which will detail all the values of the <li> (i.e the errors!)
}
else
{
location.replace( $("#RET").val() ); // There was no error, so we're going to redirect the user to the next step now (set in the RETURN_URL form field)
}
}
})
return false; // Make sure we return false.

})
})

…and there you go! Now ‘any’ error that EE returns as part of the member signup process, will be picked up by jQuery and returned in the alert. This solution certainly doesn’t *replace* client-side validation, but it certainly provides you with another layer and the user never sees the ugly EE error message!

The benefit of this solution also means that when you go to the second step, if you’ve set your Member settings for ‘no activation email’ – once the first step is completed and they are registered, they are also automatically logged in (and so all the member settings are available) for onward use.

This script *should* work for any form processed in EE, but I’ve only tested it on the Member Subscription Form.

I hope this provides some use for you as it has for me.

  • Share/Bookmark

9 Tweets

8 Responses to “jQuery and ExpressionEngine Form Processing”

  1. cwcrawley says:

    jQuery and ExpressionEngine Form Processing #eecms #expressionengine http://tinyurl.com/2wq6d3x Pls RT! Comments Welcome :)

    This comment was originally posted on Twitter

  2. AdriaanTV says:

    Hi Carl, this is great! I’ll try this one out, it looks like an elegant solution. The grey user message boxes and specialty templates have been my biggest EE frustration to date. We actually developed the serverside version of this as an add-on. If you’re interested we’ll share the code.

  3. Carl Crawley says:

    Hi Adriaan,

    Always interested to see an alternative of this. I did look at building myself a server-sided component to do the same, but jQuery is just so elegant and meant that it could be extended to other aspect of form processing for all EE functions.

    Cheers,

    Carl.

  4. ee_hub says:

    jQuery and ExpressionEngine Form Processing #eecms #expressionengine http://tinyurl.com/2wq6d3x

    This comment was originally posted on Twitter

  5. clearvisage says:

    jQuery and ExpressionEngine Form Processing « Digital Meanderings http://bit.ly/bPuvUb

    This comment was originally posted on Twitter

  6. ClientSide Username Checking, ExpressionEngine and jQuery « Digital Meanderings says:

    [...] ClientSide Username Checking, ExpressionEngine and jQueryAs a follow-up to my previous tweet about jQuery form processing, one of the other jobs I needed for my last project was an ‘auto-check’ functionality [...]

  7. cwcrawley says:

    For my US followers: 2 New Blog Posts http://tinyurl.com/349j96w and http://tinyurl.com/2wq6d3x #eecms #expressionengine Pls RT!

    This comment was originally posted on Twitter

  8. cwcrawley says:

    @mithra62 Have a look at http://tinyurl.com/2wq6d3x might help you #eecms

    This comment was originally posted on Twitter

Leave a Reply

Additional comments powered by BackType

Links of Interest!

Here are some links of sites/people that I find interesting...

Compliances

This page and most pages on this site should comply with w3c validation where appropriate. If you find it doesn't, please notify me