Home arrow AJAX & Prototype arrow Page 3 - Completing a User-Defined CSS Website with PHP

The PHP Script Details (CSS.PHP) - AJAX

In the first part, you learned about CSS and some basic tips/techniques for using the slider to display colors. In this part, we will discuss how we are going to write our AJAX and PHP scripts to make our user-defined CSS website.

  1. Completing a User-Defined CSS Website with PHP
  2. Attaching the AJAX Request Function to the Form
  3. The PHP Script Details (CSS.PHP)
  4. The PHP Final Validation Condition and Output
By: Codex-M
Rating: starstarstarstarstar / 5
October 05, 2009

print this article



Note that AJAX made a request to css.php in this line (see details on the previous page):

new Ajax.Request("/cssajax/css.php",

The goals of CSS.php are twofold: receive the POST request and sanitize the inputs, and output the sanitized request to HTML (the CSS/Style).

The first thing you need to do is ensure that the fields are not empty. This can be done by:


if ((!(empty($_POST["backgroundcolor"]))) && (!(empty($_POST["fontcolor"])))) {

//fields are not empty, process the form

else {

//fields are empty, die.




This will prevent any accident or server issues causing the form to be submitted when empty. Also, it prevents someone from trying to play with the forms.

So if the form is not empty, the next thing you need to do is receive the POST and remove spaces in the string. This can be done by:

$backgroundcolor = trim($_POST["backgroundcolor"]);


The PHP TRIM command can remove spaces.

To prevent someone from playing with the forms, we will validate the inputs very carefully. One of the most important parameters to check is the number of characters in the string. All color code strings should contain 7 characters. The PHP STRLEN command can count the characters in the string. So the character count validation line will be:

$backgroundcolorcount= strlen($backgroundcolor);

$fontcolorcount= strlen($fontcolor);

Another important parameter that you need to check is the beginning character of the string. The color code should begin with the # symbol, such as: #6F3500

So to validate this parameter, you need to have PHP return the first character of the string color code input from the POST. Below are the validation lines:

$str1 = $backgroundcolor;

$str2 = $fontcolor;

$firstbackgroundcolor = $str1[0];

$firstfontcolor = $str2[0];

At this moment, you have done the following:

  • Validated the number of characters in this color code string (should be 7).

  • Removed spaces.

  • Validated the first character of the color code string (should start with #).

One of the remaining important parameters to validate is the remaining characters; they should be alphanumeric. So for example, in this color code: #6F3500, you need to determine whether or not 6F3500 is alphanumeric. This will eliminate any possibility of injecting unwanted inputs into the form. To validate this parameter, have PHP extract the second through the seventh characters using the PHP SUBSTR function. So it will be:

$alnumbackgroundcolor = substr($backgroundcolor, -6);

$alnumfontcolor = substr($fontcolor, -6);

So for example, supposing the input variables has the following value:



The function will output:

$alnumbackgroundcolor = CFFFFF;

$alnumfontcolor = 6F3500;

So in short it will remove the # character.

>>> More AJAX & Prototype Articles          >>> More By Codex-M

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates


Dev Shed Tutorial Topics: