Attaching the AJAX Request Function to the Form - AJAX

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>