Checking captcha with jQuery and PHP

Question

I'm coding dynamic contact form. The code look like this:
jQuery:

$.ajax({
    type: "POST",
    url: "sendmail.php",
    data: {email: email, message: message, captcha: captcha}
})
.done(function( result ) {
    alert(result);
})

PHP:

<?php
    session_start();
    $email = $_POST['email'];
    $message = $_POST['message'];
    $captcha = $_POST['captcha'];

    if(isset($_POST["captcha"])&&$_POST["captcha"]!=""&&strtoupper($_SESSION["captcha_code"])==strtoupper($_POST["captcha"]))
    {
        @mail('mymail@gmail.com', 'Subject', $message, 'From:' . email);
        echo "Message successfully sent.";
    }
    else
    {
        // change opacity of #error div
    }
?>

The problem is how to change opacity of hidden div if wrong captcha code has been entered? In that case I need to insert this code insid PHP script or somewhere else:

$('#error').css({opacity:'1'}); 

Remember, that I cannot inject code with echo, because I use alert for information coming back from PHP script.

Answer 1

Commonly I use a div like this:

<div id="error" style="display: none;">ERROR PUT HERE</div>

And with Jquery you can call...

$('#error').show();

To make it visible!

EDIT : I understand what you are doing. I would recommend you use JSON as your data type.

Try the following

PHP

<?php
session_start();
$email = $_POST['email'];
$message = $_POST['message'];
$captcha = $_POST['captcha'];

if(isset($_POST["captcha"])&&$_POST["captcha"]!=""&&strtoupper($_SESSION["captcha_code"])==strtoupper($_POST["captcha"]))
{
    @mail('mymail@gmail.com', 'Subject', $message, 'From:' . email);
    echo json_encode(array('success' => true, 'message' => "Message successfully Sent"));
}
else
{
    echo json_encode(array('success' => false, 'message' => "(PUT YOUR MESSAGE HERE!)"));
}
?>

Jquery

$.ajax({
    type: "POST",
    url: "sendmail.php",
    dataType: "json"
    data: {email: email, message: message, captcha: captcha}
})
.done(function( result ) {
    if(result.success) {
        alert(result.message);
    } else {
        $("#error").text(result.message);
        $('#error').css({opacity:'1'}); 
    }
})

Answer 2

Add a success part to your jQuery:

success: function(data) {
    if(data == 'error'){
        $('#error').css({opacity:'1'}); 
    }
}

And in your PHP:

if(isset($_POST["captcha"])&&$_POST["captcha"]!=""&&strtoupper($_SESSION["captcha_code"])==strtoupper($_POST["captcha"]))
{
    @mail('mymail@gmail.com', 'Subject', $message, 'From:' . email);
    echo "Message successfully sent.";
}
else
{
    echo "error";
}

Answer 3

Suggestion: setting the error with ajax .fail()

$.ajax({
        type: "POST",
        url: "sendmail.php",
        data: {email: email, message: message, captcha: captcha}
    })
    .done(function( result ) { alert(result); })
    .fail(function() { alert("error");});

Answer 4

There a couple ways you can do this. One way is to respond from php with javascript code that can be executed upon load:

<?php
    session_start();
    $email = $_POST['email'];
    $message = $_POST['message'];
    $captcha = $_POST['captcha'];

    if(isset($_POST["captcha"])&&$_POST["captcha"]!=""&&strtoupper($_SESSION["captcha_code"])==strtoupper($_POST["captcha"]))
    {
        @mail('mymail@gmail.com', 'Subject', $message, 'From:' . email);
        echo "Message successfully sent.";
    }
    else
    {
        // change opacity of #error div
        echo "<script type='text/javascript'>";
        echo "    $('#error').css({opacity:'1'});";
        echo "</script>";
    }
?>

In this case, your response is some javascript code to be executed when you intend to change the opacity of the error div. However, if you alert the result of the ajax it will type out the entire javascript code in the alert message as well.

Another way is to actually return an error code other than 200 (success) and to check for that specific case:

<?php
    session_start();
    $email = $_POST['email'];
    $message = $_POST['message'];
    $captcha = $_POST['captcha'];

    if(isset($_POST["captcha"])&&$_POST["captcha"]!=""&&strtoupper($_SESSION["captcha_code"])==strtoupper($_POST["captcha"]))
    {
        @mail('mymail@gmail.com', 'Subject', $message, 'From:' . email);
        echo "Message successfully sent.";
    }
    else
    {
        // change opacity of #error div
        header('HTTP/1.1 500 Captcha not entered correctly');
        exit();
    }
?>

and when you retrieve the ajax error response, check if the error code matches the one you throw (in this case 500) and then set the opacity there.