Home arrow AJAX & Prototype arrow Page 4 - Create a User-Defined CSS Website with PHP

The AJAX HTML Form (Hidden) - AJAX

PHP as a server side scripting language can be used to customize CSS. This can make your website more readable and useful to your visitors. In this article, you'll learn what you can do to let them adjust your site so it looks good to them. This is the first part of a two-part series.

  1. Create a User-Defined CSS Website with PHP
  2. The Use of Sliders to Customize Colors
  3. Implementation of the Slider
  4. The AJAX HTML Form (Hidden)
By: Codex-M
Rating: starstarstarstarstar / 2
October 01, 2009

print this article



Now that you have the color function and the slider, you need to have a hidden AJAX-powered HTML form to grab the user's color code choices and submit them  via AJAX.

Working with JavaScript/AJAX is a fairly challenging process. The first challenge is how we are going to grab the color code choices the moment the user clicks the “Customize webpage color.” We need to write a JavaScript function for this.

Suppose we have the form below:

<form action="http://localhost/cssajax/css.php" method="POST" name="slider" onsubmit="return false;">

<input type="hidden" name="backgroundcolor" value="" ID="backgroundcolor">

<input type="hidden" name="fontcolor" value="" ID="fontcolor">

<input type="submit" value="Customize webpage color" class="btn" onClick="grabcolor()" onmouseover="hov(this, 'btn btnhov')" onmouseout="hov(this, 'btn')" ID="Button1" NAME="Button1"/>


We can assign an onClick event to grabcolor() function. This function is responsible for grabbing the color codes from the JavaScript. This is a script for the grab color function (in this example, for the background color):

<script type="text/javascript">

function grabcolor()


document.slider.backgroundcolor.value = document.getElementById('colorCode2').innerHTML;



This line:

document.slider.backgroundcolor.value = document.getElementById('colorCode2').innerHTML;

Grabs the color in the JavaScript function and assign it to the “backgroundcolor"ID in the form called “slider” (see above). The background color hidden field is this:

<input type="hidden" name="backgroundcolor" value="" ID="backgroundcolor">

After clicking, the grab color function will assign the selected color codes to the value parameter. Please refer to the second part for the detailed discussion of the AJAX and PHP implementation.

>>> 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: