The AJAX HTML Form (Hidden) - AJAX

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"/>

</form>

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;

}

</script>

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.