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

Attaching the AJAX Request Function to the Form - 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.

TABLE OF CONTENTS:
  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
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Now that you have completed the AJAX Request function, the next step is to attach the AJAX function to the existing form:

<form action="/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>

The name of the AJAX function is sendRequest(). One of the common techniques for attaching the AJAX function involves using the JavaScript onClick event; however, we already have one function attached to the onClick event in the form (grabcolor(), the color-grabbing function).

In order for the form to send the request to AJAX the moment the submit button (Customize webpage color) has been clicked, we can add another function to the onClick event. This can be done by modifying the existing onClick event to:

onClick="grabcolor();sendRequest()"

This technique is commonly called "executing multiple JavaScript functions in one onClick event."

So the final form will be:

<form action="/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();sendRequest()" onmouseover="hov(this, 'btn btnhov')" onmouseout="hov(this, 'btn')" ID="Button1" NAME="Button1"/>

</form>



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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

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