Adding Messenger Smilies to form fields!

If you have developed a forum that uses the Messenger Smilie extension, or simply want to allow uses to add smilies without typing them into form fields by hand then this could be just what you need!

By giving the user either a text or graphical link to click to enter smilies you can enhance the user experience, make your site or application a lot more user-friendly and reduce input errors by the user..............

This tutorial will guide you through how to implement such a system :)

Adding Smilies dynamically to form fields [ background ].

If you have used the Internet, e-mail or text messaging on mobile phones then there's no doubt you would have come across 'smilies/smileys' (sometimes called emoticons) at some point.

For those that don't know? Smilies are emotional icons that help purvey your feelings in text based communication systems. By adding these small icons we can give the recipient a better understanding of how we feel, and what we are trying to say when we speak to them across nonverbal mediums.

For a more in-depth look at smilies check out my tutorial base around George Petrov's ultra-cool Messenger Smilie extension for UltraDev.

Why would we want to do this?

If you have developed a forum that uses the Messenger Smilie extension, or simply want to allow uses to add smilies without typing them into form fields! By giving the user either a text or graphical link to click to enter smilies you can enhanced the user experience and make your site or application a lot more user-friendly :)

Many web application have a list of small smilie icons either on the page or within a pop-up window that can be clicked and the resulting smilie code is then added to the form element.

Via Graphic Links

Via Text Links

Happy

Sad


So how does it work?

It is simply based around a javascript function that takes your input via an onClick event on the page. The following function should be placed into the head of your page:

<script language="JavaScript">
<!--

function addSmilie(smilie, smilieForm, smilieField) {
var revisedMessage;
var currentMessage = document.smilieForm.elements[smilieField].value;
revisedMessage = currentMessage+smilie;
document.smilieForm.elements[smilieField].value=revisedMessage;
document.smilieForm.elements[smilieField].focus();
return;
}

//-->
</script>

Next, you have to call the function via the linked text or graphic with your page like so:

A Graphic link
<a href="javascript:;" onClick="addSmilie(' :) ','smilieForm','forumText');"><img src="regular_smile.gif" width="19" height="19" border="0"></a>

A Text link
<a href="javascript:;" onClick="addSmilie(' :) ','smilieForm','forumText');">Happy</a>

As you can see there are 3 elements to the function:

  • The smilie code to be added to the form field element (In this example it is ' :) ')
  • The name of the form ('smilieForm')
  • The name of the form field element ('forumText')

Hope you this is all understandable? If you wish to view the full code you can download it here.

Regards - Jason

Additional Information ?

This function could be used to insert any text into form field elements but was written specifically for the purpose of smilies :)

Place your comment about Adding Messenger Smilies to form fields!




You must me logged in to write a comment
Comments
Nice
October 17, 2008 by John Fitzpatrick

Thanks alot this is very handy. Im actually going to be using it to insert popular search querys into a search form. Like a little mini tag cloud under my meta search form.

Not working

Hi Jason,

I can't this to work? It's also not working on the site.. any help would be appreciated!

Cheers,

Craig

RE: :: IMPORTANT! :::
February 5, 2002 by Waldo Smeets
Thanks Jason!
See all 5 Comments