I have the captcha creating an image in captcha.php. On my contact php page, it calls for the image & it has a reload and everything works. I just can't seem to find a way to validate it.

Here is the code that creates the captcha image:

<?php

session_start();



$word_1 = '';

$word_2 = '';



for ($i = 0; $i < 4; $i++) 

{

    $word_1 .= chr(rand(97, 122));

}

for ($i = 0; $i < 4; $i++) 

{

    $word_2 .= chr(rand(97, 122));

}



$_SESSION['random_number'] = $word_1.' '.$word_2;



$dir = '/addons/fonts/';



$image = imagecreatetruecolor(165, 50);



$font = recaptchaFont.ttf; // font style



$color = imagecolorallocate($image, 0, 0, 0);// color



$white = imagecolorallocate($image, 255, 255, 255); // background color white



imagefilledrectangle($image, 0,0, 709, 99, $white);



imagettftext ($image, 22, 0, 5, 30, $color, $dir.$font, $_SESSION['random_number']);



header(Content-type: image/png);



imagepng($image); 



?>

That is all that is in that file.

Next there is the code from my actual form (contact us page):

<form id=contactForm method=post action=<?php echo $_SERVER['PHP_SELF']; ?>>

<table>

<tr>

    <td><span class=greyText>Enter text shown:</span></td>

    <td>

        <div id=captcha-wrap>

            <div class=captcha-box>

                <img src=captcha.php alt= id=captcha />

            </div>

            <div class=text-box>

                <label>Type the two words:</label>

                <input name=captcha-code type=text id=captcha-code>

            </div>

            <div class=captcha-action>

                <img src=./images/captcha-refresh.png  alt= id=captcha-refresh />

            </div>

        </div>

        <span id=captchaInfo>*</span>  

    </td>

</tr>

<tr>

    <td colspan=2>

            <div class=seperator>&nbsp;</div>



            <input type=submit name=submit class=styleButton style=float:right;margin-right:10px value=SUBMIT /></td>

</tr>

</table>

</form>

I have other rows in that table for name, email etc, but I just removed it to make this shorter.

& in the document ready function for the contact page, I have this code to refresh the captcha when button is clicked:

 // refresh captcha

 $('img#captcha-refresh').click(function() {  



        change_captcha();

 });



 function change_captcha()

 {

    document.getElementById('captcha').src='jquery-captcha.php?rnd=' + Math.random();

 }

Next is the validation I have for the whole form itself. It works for everything but the captcha:

$(document).ready(function(){

    //global vars

    var form = $(#contactForm);

    var name = $(#name);

    var nameInfo = $(#nameInfo);

    var telephone = $(#telephone);

    var telephoneInfo = $(#telephoneInfo);

    var email = $(#email);

    var emailInfo = $(#emailInfo);

    var message = $(#message);

    var messageInfo = $(#messageInfo);

    var captcha = $(#captcha-code);

    var captchaInfo = $(#captchaInfo);



    //On blur

    name.blur(validateName);

    telephone.blur(validatePhone);

    email.blur(validateEmail);

    message.blur(validateMessage);

    captcha.blur(validateCaptcha);

    //On key press

    name.keyup(validateName);

    telephone.keyup(validatePhone);

    message.keyup(validateMessage);

    captcha.keyup(validateCaptcha);

    //On Submitting

    form.submit(function(){

        if(validateName() & validateEmail() & validatePhone() & validateMessage() & validateCaptcha())

            return true

        else

            return false;

    });



    function validateName(){

        //if it's NOT valid

        if(name.val().length < 4){

            name.addClass(error);

            nameInfo.text(* Name Required);

            nameInfo.addClass(error);

            return false;

        }

        //if it's valid

        else{

            name.removeClass(error);

            nameInfo.text(*);

            nameInfo.removeClass(error);

            return true;

        }

    }

    function validateCaptcha(){



        $.post(captchaValidate.php?+$(#contactForm).serialize(), {



            }, function(response){



            if(response==1)

            {

                captcha.removeClass(error);

                captchaInfo.text(*);

                captchaInfo.removeClass(error);

                return true;

            }

            else

            {

                captchaInfo.text(* Please enter the words you see in the box above. If you are having trouble seeing it, click the refresh button.);

                captchaInfo.addClass(error);

                captchaInfo.css({'float': 'left', 'margin-left': '5px'});

                return false;

            }



        });

    }

});

I again removed some of the code above to make this shorter but I left the validateName function so you can see how I pretty much did the rest of them.

In the validateCaptcha code it directs to this page/code:

<?php

session_start();



if(@strtolower($_REQUEST['captcha-code']) == strtolower($_SESSION['random_number']))

{



    echo 1;// YAY!



}

else

{

    echo 0; // invalid code

}

?>

Any help on this would be REALLY appreciated I've been stuck for so long! I have tried a few things already but nothing seems to work.