DEMO: HERE

The AJAX Form

<form name="ajaxForm" id="ajaxForm" method="post" action="" onsubmit="postForm(); return false;">
	<label for="yourName">Your Name</label>
	<input type="text" name="yourName" id="yourName" />
	<br />

	<label for="yourAge">Your Age</label>
	<input type="text" name="yourAge" id="yourAge" />

	<br />

	<label for="submitForm">&nbsp;</label>
	<input type="submit" id="submitForm" value="Submit" />

	<input type="hidden" name="formPosted" value="true" />
</form>

We’re using a simple form for this tutorial, but feel free to add any number of form elements you wish. In this example, we have given the form an id of ajaxForm, we also have a field for yourName and a field for yourAge. As explained in my User Login Script tutorial, we also have a hidden field that I like to use to confirm that the page was actually submitted, and which form was the “sender”. The most important thing about this form, and to make it work using AJAX, is the following attribute within our opening form tag:

onsubmit="postForm(); return false;"

The onsubmit attribute allows us to execute some JavaScript (to eventually run our AJAX!) prior to actually sending the form using it’s default method (by sending the form data to the page via a complete page reload). We’re immediately calling return false; straight after, this actually prevents the form from sending the data the normal way.

If it helps to understand, here’s all we’ve done up to this point:

• Create a simple HTML form
• Add the onsubmit attribute to the opening form tag
• Made a call to a (currently non-existent) JavaScript function within the onsubmit attribute
• Returned false after our call to the JavaScript function – to prevent the form from actually submitting

The AJAX Preloader

Our form is all dealt with, so now let’s create a little div, which will show when our form is sending the data, and waiting for some response back. After your form, add the following:

<div id="loading" style="display: none;">
	<img src="loader.gif" style="vertical-align: middle;" /> Loading...
</div>

This is a real simple little div, which is hidden by default (using the style=”display: none” attribute). We’ve given it an id of loading, which is important as we’ll need to use the jQuery to show / hide this div in a moment. Inside this div I have placed a preloading gif which I created using http://www.preloaders.net, and a simple bit of text saying ‘Loading…’. You can put whatever you like within this div really, but I quite like the preloading animated gifs myself.

The Actual AJAX Function

Ok, so we’re diverting the actual onsubmit action of the form to a JavaScript function called postForm(). We’re using jQuery to handle this AJAX form as it’s a much easier method than manually writing a cross-browser XMLHttpRequest handler. I’m assuming you know how to include jQuery into your page, but if not – take a quick peek at my Textarea Counter tutorial, which explains my preferred method for including jQuery libraries.

Right, you have jQuery included? Good, let’s go and create the postForm() function now. It looks like the following:

function postForm(){
	$('#loading').show('fast');
	$.post("index.php", $("#ajaxForm").serialize(),
	   function(data){
			$('#loading').hide('fast');
	     alert("Your name is: " + data.name + "\nYour age is: " + data.age);
	   }, "json");
}

The first thing we’re doing is showing the loading div (with our preloader). We do this by calling:

$('#loading').show('fast');

This does a quick fade-in of our loading div, before we do anything else. This is a good idea, because we want to give the user immediate feedback that something it happening. We could also disable the submit button at this point – but that’s not covered in the scope of this tutorial.

Next comes our actual AJAX call which will submit our form. I’m using $.post() in this tutorial, but you can use $.get() and even $.getJSON().

• $.post() will simulate a form POST (as if we had our form method set to post)
• $.get() will simulate a form GET request (as if we had our form method set to get)
• $.getJSON will simulate a GET request as above, but expect the results to be well formatted JSON, and as such return it as JSON data

A quick look at the jQuery docs for how the $.post() function should be formatted shows that we can use numerous methods, but for this tutorial we want to set four main things.

The page we’re submitting the form data to. As explained in my User Login Script tutorial, I like to submit the data to the same page, so this is going to be set to index.php (and we’ll get to how we handle the data in a moment!).

Next, we need to tell the AJAX call what data we’re going to be sending. As we’re using a well-formatted form (when using AJAX, you won’t always necessarily be using a form), we’re going to use a great jQuery function called serialize() which – in basic terms – tells our function that we’re sending all elements within the form that we’re serializing. We do this by calling $(“#ajaxForm”).serialize() (essentially, we’re serializing all the data within the ajaxForm – remember, this is the ID of the form we created earlier).

After that comes our “success” function. In other words, a function that gets automatically called once our AJAX call has had a response from the page that we’re sending the data to. This is taking an automatic parameter which I’ve called data. You can name this parameter anything you like (provided it’s not a reserved JavaScript word), but generally speaking – data is a good enough keyword, as essentially what we’ll be receiving is data.

We’ll break down that mini-function in a moment.

The fourth and final parameter that we need (for this tutorial anyway) is the “what data type are you expecting back?” parameter. I’ve set this to json as I like working with it. What is JSON? Ah, it stands for JavaScript Object Notation. It is a relatively modern, and my preferred method, for handling data within JavaScript. If you’re used to PHP, think of JSON as a multi-dimensional array. It allows us to handle groups of data as one “object” (or variable if you prefer). We generally use dot notation to access it’s properties. I’m sure I’ll explain JSON in greater detail in the future – but for now here’s a more-than-generous explanation.

Ok so our four parameters are set:

• Send Data To This Page
• Send This Data To That Page
• Run This Function When We Get a Response From That Page
• I’m Expecting The Data To Be Returned Like This

Ok so that’s our four main parameters set for our $.post() function. Before we check out the server-side handling of this AJAX call, let’s just take a quick peek at our success function (which is our third parameter in our AJAX call):

function(data){
	$('#loading').hide('fast');
	alert("Your name is: " + data.name + "\nYour age is: " + data.age);
}

The first thing we’re doing is hiding the loading div (as our data has now loaded), and then we’re just doing a simple alert with the data we received. To populate the alert, we’re just using JSON to retrieve the data using data.VARIABLE. In this case, data.name and data.age.

How do we know we’re going to have name and age sent back as our data JavaScript Object? That all comes down to the final part – the server-side handling of our AJAX form, and I think you’ll be surprised to see just how simple it really is!

Handling the AJAX Form, Server-Side

At the very top of our page – where I like to handle my form posts (on the same page as the form, not on a different page), we have the following code:

<?php
if($_POST['formPosted'] == 'true'){
	$returnData = array(2);
	$returnData['name'] = $_POST['yourName'];
	$returnData['age']	= $_POST['yourAge'];
	echo json_encode($returnData);
	exit;
}
?>

That’s it!

We know that we can handle the form variables using the $_POST super global, as we used the $.post() function via jQuery. We also know that we’re sending ALL form elements, because we used the serialize() method, again provided by jQuery. This means that we can access the yourName and yourAge form elements (note that we’re also checking that formPosted is true before running this block of code – this was our hidden variable in our form remember?).

We’re then simply (and very simply for the purposes of this tutorial), creating an array called $returnData, and adding the value of yourName to $returnData['name'], and yourAge to $returnData['age']. Notice something here? The PHP array we have just created now has two elements, name and age.

All we need to do now is to encode our array as JSON, and echo it out, which we do in one line:

echo json_encode($returnData);

Then most importantly, we exit. We MUST exit here, otherwise the remainder of the page would continue to load, and also be sent back to our JavaScript function which is waiting for the data. ALWAYS exit once you have dealt with an AJAX call. The point is to provide the data requested and that’s it. If we sent it all back, it would malform the JSON we’re echoing out, and as such, break our functionality. Not to mention it’d also be completely pointless, as we’re loading the entire page again!

So there you have it! Any questions, comments or criticism – please post in the comments, and don’t forget that there’s a:

DEMO: HERE

This could be extended pretty easily, so that it works on multiple textareas, or even as a jQuery plugin.

Show Me the Code

If you don’t need to read the breakdown of this tutorial, you can simply just copy the code below and read no further!

The Javascript

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript" language="javascript">
google.load("jquery", "1.4.2");

var characterLimit = 150;

google.setOnLoadCallback(function(){

	$('#remainingCharacters').html(characterLimit);

	$('#myTextarea').bind('keyup', function(){
		var charactersUsed = $(this).val().length;

		if(charactersUsed > characterLimit){
			charactersUsed = characterLimit;
			$(this).val($(this).val().substr(0, characterLimit));
			$(this).scrollTop($(this)[0].scrollHeight);
		}

		var charactersRemaining = characterLimit - charactersUsed;

		$('#remainingCharacters').html(charactersRemaining);
	});
});
</script>

The HTML

 characters remaining.

So, How Does It All Work?

Let’s start with the HTML markup. It’s pretty simple, we’re just creating a textarea, with an ID of myTextarea. We also have a paragraph below that, which has an empty span with an ID of remainingCharacters. This is where the remaining characters will be displayed to the user as they type.

Google JSAPI

The Javascript is a little more involved. Let’s go line-by-line:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

I’ve recently started using the Google JSAPI to link to my most-used Javascript libraries. For those who don’t know what the Google JSAPI is – have a read here. I prefer to load jQuery this way for a number of reasons:

• It’s always hosted in the same place – so no having to traverse your own paths to find where your JS libraries are located
• It saves bandwidth
• It seems to load much faster
• It’s very easy to bolt on other libraries you may need

<script type="text/javascript" language="javascript">
google.load("jquery", "1.4.2");

Here, we’re starting our main Javascript block, and – using the Google JSAPI – we’re loading the jquery library, version 1.4.2.

Variable Limit

var characterLimit = 150;

Real simple here – we’re setting a global variable to the value of our limit for the textarea. Feel free to change this value to whatever you wish.

What? No $(document).ready()?

google.setOnLoadCallback(function(){

Nope. When you use the Google JSAPI, you should really use google.setOnLoadCallback(). This is due to the way we’re loading the jQuery. $(document).ready() may actually provide a false-positive, and execute before the jQuery has been fully loaded – therefore we should use the google on load callback – which fires once all the libraries we have requested have been included.

Set the Starting Figure

$('#remainingCharacters').html(characterLimit);

As our remainingCharacters span in our HTML markup is empty, we need to set the value when the page loads. We could hard-code the value of the remaining characters, but this would mean that we’d have to update two places if we wanted to change the limit, not just one (the one place we need to update the character limit is on the var characterLimit = 150; line).

Binding It All Up

$('#myTextarea').bind('keyup', function(){
	var charactersUsed = $(this).val().length;

	if(charactersUsed > characterLimit){
		charactersUsed = characterLimit;
		$(this).val($(this).val().substr(0, characterLimit));
		$(this).scrollTop($(this)[0].scrollHeight);
	}

	var charactersRemaining = characterLimit - charactersUsed;

	$('#remainingCharacters').html(charactersRemaining);
});

The final bit, this bind is where all the magic happens. Firstly we’re binding a function to the ‘keyup’ event on the element named myTextarea.

Inside this function we need to know how many characters have been used. We do this by calling the following:

var charactersUsed = $(this).val().length;

Notice how we can use $(this) to reference the myTextarea element. This is a nice little bit of shorthand that comes in handy – often!

if(charactersUsed > characterLimit){
	charactersUsed = characterLimit;
	$(this).val($(this).val().substr(0, characterLimit));
	$(this).scrollTop($(this)[0].scrollHeight);
}

We then have this if statement which checks to see if the number of characters used is greater than our preset character limit. If it is greater, we know that the user has gone over their limit, and we need to do something about that. We need to trim any extra characters past our limit, and reset the focus to the bottom of the textarea. We need to set the focus to the bottom again, because when you update the text within a textarea, the focus jumps back to the top!

Letting the User See How Many Characters Remain

var charactersRemaining = characterLimit - charactersUsed;

$('#remainingCharacters').html(charactersRemaining);

Fairly self explanatory here – we do a quick calculation to determine how many characters remain, and then update the remainingCharacters span, so the user can see how much more they can type.

Remember, this gets updated every time they key is released from within the textarea.

That concludes this tutorial! I hope it’s helped in some way. I may even release this as a simple jQuery plugin that can be used on any number of textareas.

Anyway, I soon realised that converting the PHP array into a Javascript array was a bad idea, as converting it to a Javascript object would be much much better.

To convert a PHP array (single dimensional, or multidimensional) you simply need to double JSON encode the array. This tutorial relies on jQuery to parse the JSON (using $.parseJSON()), but this isn’t at all necessary – there are other methods to parse JSON. Let’s use the following PHP array as our example:

$aCoders = array();
$aCoders['Ed']['age'] = 25;
$aCoders['Ed']['languages'] = array('PHP', 'MySQL', 'JavaScript', 'Objective-C', 'HTML', 'CSS');
$aCoders['Sarah']['age'] = 25;
$aCoders['Sarah']['languages'] = array('HTML', 'CSS');

Now we want to use that object with JavaScript. Rather than firing off an AJAX request to get the results we want, seeing as the array is fairly small, we may as well render it in the browser when the page loads – to save on bandwidth and unnecessary requests to the server. To make this array become accessible in Javascript (using jQuery), use the following:

var coders = $.parseJSON(<?php print json_encode(json_encode($aCoders)); ?>);

Yep – you need to double encode the array. This is the key that took me a while to figure out. It adds extra slashes each time you encode, therefore making it render-able in Javascript the second time you encode it.

You can now access your array data using methods similar to the following:

for(var language in coders.Ed.languages){
  alert('Ed can code in ' + language);
}

Note that javascript objects use dot notation to access the data. If you have a numeric key within your PHP array, you must access it via Javascript using square brackets. For example:

alert(object[5].name);

I hope this helps you to better understand how to translate PHP arrays into Javascript objects, and realise when it’s a good idea to use them, and when it’s still a good idea to just grab what you need by means of an AJAX request.

It’s not as comprehensive as some other articles out there, as I wanted to keep this nice and simple. If you’re like me, you just want the simple tutorial – as you’ll enjoy building on it in the future!

Gimmie the code. Now.

Let’s do what I usually do – start with the entire code snippet, so if you like – just take it and run! If you want a break down, keep reading on after the code.

Download the Plugin Here

Documentation / Usage Here

Demo the jQuery Default Text Plugin

$.fn.DefaultText = function(options) {

    var defaults = {
        inactiveClass:      '',
        inactiveFontStyle:  'italic',
        inactiveColour:     'rgb(204,204,204)',
        activeFontStyle:    'normal',
        activeColour:       'rgb(0,0,0)'
    };

    var opts = $.extend(defaults, options);

    $(this).each(function(){

        if(opts.inactiveClass != ''){
            $(this).addClass(opts.inactiveClass);
        }else{
            $(this).css({'font-style' : opts.inactiveFontStyle, 'color' : opts.inactiveColour});
        }

        $(this).bind('focus', function(){
            if($(this).val() == $(this).attr('title')){
                if(opts.inactiveClass != ''){
                    $(this).removeClass(opts.inactiveClass);
                }else{
                    $(this).css({'font-style' : opts.activeFontStyle, 'color' : opts.activeColour});
                }

                $(this).val('');
            }
        });

        $(this).bind('blur', function(){
            if($(this).val() == ''){
                if(opts.inactiveClass != ''){
                    $(this).addClass(opts.inactiveClass);
                }else{
                    $(this).css({'font-style' : opts.inactiveFontStyle, 'color' : opts.inactiveColour});
                }

                $(this).val($(this).attr('title'));
            }
        });

        $(this).blur();
        $(this).val($(this).attr('title'));

    });

};

Simply save this as whatever you want (I used jquery.DefaultText.js) and start using it now! Docs on how to use can be found on my Github repo.

So how do I make a jQuery plugin?

It’s really, really simple. It’s probably much more simple than you think! The first line is very important:

$.fn.DefaultText = function(options) {

This is where we declare the plugin. DefaultText is the name of this plugin. You can name yours whatever you like. As you can see we’re sending one parameter options to the plugin function. This is a completely optional parameter, but is used to send parameters to our plugin as explained in a moment.

    var defaults = {
        inactiveClass:      '',
        inactiveFontStyle:  'italic',
        inactiveColour:     'rgb(204,204,204)',
        activeFontStyle:    'normal',
        activeColour:       'rgb(0,0,0)'
    };

This is a list of our default parameters. You can see we have a placeholder for inactiveClass, and four other parameters. Two for a default inactive state (when the textfield is blurred [no focus on it]) and two for when the user has focused the text field. I coded the plugin like this for two reasons.

1. I like to have a fallback without always having to rely on yet another CSS definition (that many jQuery plugins require)
2. Because this tutorial would be pretty bare without it!

jQuery Plugin Options

The next line allows us to extend the default parameters (stored in the variable defaults) with options passed through the plugin. Basically, this line:

var opts = $.extend(defaults, options);

merges the defaults with any options passed through, for example, like this:

$("#textField").DefaultText({inactiveClass: 'myInactiveClass'});

Any parameters passed through in this way will overwrite the defaults as set in the plugin.

The meat of the plugin

$(this).each(function(){

This is where it all gets going. This line basically initiates the loop through all of the matched elements when we declared the plugin. If we had a form like so:

And initialised the plugin using the following:

$(".defaultTextInput").DefaultText();

Then the loop would match all three of the text inputs, with the class defaultTextInput. So for each element we have found, we need to run some JavaScript goodness!

Firstly, we are setting the default state of the inputs, as their unfocused states (in this case, the font will be a light grey, and italicised).

        if(opts.inactiveClass != ''){
            $(this).addClass(opts.inactiveClass);
        }else{
            $(this).css({'font-style' : opts.inactiveFontStyle, 'color' : opts.inactiveColour});
        }

We have an if statement, just so we know whether we’re using a class to style the default look/feel of the input, or whether to use the inactive font style and colour. It’s important to note here, if the user has chosen to use a class, then that will take precedence over the inactiveFontStyle and inactiveColour.

Next, we bind the focus() function to each of the inputs. Remember, this will bind to EVERY matched element, as we’re still inside the $(this).each() loop.

        $(this).bind('focus', function(){
            if($(this).val() == $(this).attr('title')){
                if(opts.inactiveClass != ''){
                    $(this).removeClass(opts.inactiveClass);
                }else{
                    $(this).css({'font-style' : opts.activeFontStyle, 'color' : opts.activeColour});
                }

                $(this).val('');
            }
        });

This simple function checks to see if the value of the text input matches the title attribute of the input. If it does, it removes the default styling – then sets the value to an empty string – ready for writing into.

In a similar fashion to the above, this next block controls the blur() functionality for each text input:

        $(this).bind('blur', function(){
            if($(this).val() == ''){
                if(opts.inactiveClass != ''){
                    $(this).addClass(opts.inactiveClass);
                }else{
                    $(this).css({'font-style' : opts.inactiveFontStyle, 'color' : opts.inactiveColour});
                }

                $(this).val($(this).attr('title'));
            }
        });

This time, we looking to see if the value of the text input is empty. If it is, we put the default styling back on for that text input (the same way we did at the beginning, if the inactiveClass is present – it uses that, otherwise it uses the inactiveFontStyle and inactiveColour values). We then put the default text – stored in the title attribute of the element – as the value of the text input.

        $(this).blur();
        $(this).val($(this).attr('title'));

    });

};

The final part of this jQuery plugin tutorial is just making sure that every text input is blurred, and has the title attribute as the default text. It’s not really necessary at all – it’s just there to show how you can run other functionality within the meaty loop. We’re then closing the each() loop and closing the function.

That’s it! Easy!

It’s really as simple as that! You can now go and author your own uber-1337 jQuery plugins! Don’t forget to show me what you’ve made – I might even feature the best plugins on this site for everyone to use!

Download the Plugin Here

Documentation / Usage Here

Demo the jQuery Default Text Plugin

If yes to the above two questions, I think I know the problem you’re having, and have a solution. It’s to do with mod_security (an Apache module) and the ‘http://’ part of the URL.

The obvious answer is to tell you to go and modify the module yourself, but many of you don’t have access to those kind of modifications due to hosting company restrictions. My simple solution uses JavaScript to remove the ‘http://’ part from the URL.

Let’s start by saying you have a form that looks something like the following:

	Full Name:

	
	Email Address:

	
	Website Address:

	
	 

Add the following between the tags (or within a JavaScript include):

function trim(str, chars) {
	return ltrim(rtrim(str, chars), chars);
}

function ltrim(str, chars) {
	chars = chars || "\\s";
	return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}

function rtrim(str, chars) {
	chars = chars || "\\s";
	return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}

function MakeLinkSafe(){
	var e = document.getElementById('WebsiteAddress')
	str = trim(e.value);
	if(str.substr(0, 7) == 'http://'){
		e.value = str.substr(7);
	}
	return true;
}

Then, on your form submit button, add the following:

onclick="MakeLinkSafe()"

So that your submit button now looks like:

Now, when you click the submit button, it’ll invoke the JavaScript, which will remove the http:// part (if it exists). You can then modify your ‘action page’ code to catch this element and re-add the http:// part if needs be.

Just remember to update the

document.getElementById('WebsiteAddress')

to reflect the ID of the element that collects the URL on your form.