htmlspecialchars function for Javascript / jQuery

I was dealing with user input on a web form using a little AJAX magic to auto-update the database while keeping the user on the same page.  I always use the PHP function htmlspecialchars to clean up text input, and needed something similar for my javascript code.  I couldn’t find anything* so I wrote my own.  Maybe this will come in handy for someone else.

According to the htmlspecialchars function page on php.net, the translations performed are:-

‘&’ (ampersand) becomes ‘&’
‘”‘ (double quote) becomes ‘"’
“‘” (single quote) becomes ‘'’
‘<‘ (less than) becomes ‘&lt;’
‘>’ (greater than) becomes ‘&gt;’

So here’s my function for javascript written using the .replace method:-

Take note, we need to use the ‘g’ to globally match, or the above function will only replace the first instance of each character.

* if this function already exists in the jQuery library, please let me know in the comments.

Server side code for the Quote Of The Moment plugin

Here I will outline the code used to create the server side code required by the Quote Of The Month WordPress plugin.  The plugin calls getqotm.php (code shown at the bottom of this post) from our server in order to retrieve a random quote from our database.

First we require a database that holds the quotes and authors.  You can use the code below within phpMyAdmin and run it as a SQL query in order to set up your own database as follows:

As can be seen above, we create a table called ‘qotm’ with the necessary fields for each quote along with its author.  Two additional fields were created.  The ‘added’ field simply timestamps when each new entry is added, and the ‘rating’ field is currently not used but perhaps in the future will contain a number out of 5 depending on how a user may rate the quality of any given quote.

Here’s a snapshot of a section of the database currently in use:

table_qotm-capture

So we have our database, but how do we populate it?  There are a number of options, and here I will describe one which involves a few PHP files and a little jQuery magic in order to add them by hand.

As always we need our config.php file which is included in our main PHP file in order to connect to our database:

Next we’ll have our basic form allowing us to input our quote and its author:

Whats with all that javascript?  Well, it allows us to use AJAX in order to update our database using the addsql.php code without refreshing our page.  This means that we haven’t got to fill in our ultra top secret password each time we want to add another quote.

Here’s the final piece of the puzzle, the actual code that adds the data to our database and returns the little bit of text that displays at the bottom of the above code in our div id ‘display_result’:

You will need to change ‘awesomepassword’ for something actually awesome yourself.

So we have our table, our quote and author entry page with our javascript allowing us to update our database on the fly.

We now need a little PHP code that randomly picks out a quote and author and spits out our html ready to be displayed by our plugin.

Couldn’t be simpler.

But wait, why have we altered the header?

By default cross domain AJAX is not allowed by this server.  What does this mean?  See this post for a full explanation.  Put simply, this allows anyone running our plugin from any domain to access this server using the AJAX method which is employed in our plugin.