Treehouse: Grow your CSS skills. Land your dream job.

Post varible from PHP to awating AJAX jQuery?

  • # July 13, 2009 at 2:18 pm

    Hello,
    At the moment I have a contact form (will post all the code below), I use the AJAX function in jQuery to post all the information over to the PHP file but then I would like it to post back varibles not HTML. The reason for this is that I would like a var allDone which will = false but if it is all good then I know which animation path to take. IE fade back in and flash or just fade out and say thanks!
    Can this be done?

    Here is my code :)
    HTML

    Code:









    JQUERY

    Code:
    $(function(){
    $(‘input#submit’).click(function(){
    $(‘.loader’).fadeIn(“slow”);
    $(‘input#submit’).fadeOut(“fast”);
    $(‘#theyFill’).animate({opacity: 0.3}, 500);

    var name = $(‘input#name’).val();
    var email = $(‘input#email’).val();
    var subject = $(‘input#subject’).val();
    var message = $(‘textarea#message’).val();

    var allDone = false;

    $.ajax({
    type: ‘post’,
    url: ‘theSender.php’,
    data: ‘name=’ + name + ‘&email=’ + email + ‘&subject=’ + subject + ‘&message=’ + message + ‘&allDone’ + allDone,

    success: function(results){

    $(‘.loader’).fadeOut(‘slow’);
    $(‘input#submit’).animate({opacity: 1.0}, 3000).fadeIn(“slow”);

    if(allDone == true){
    $(‘#results’).html(“allDone is now true”);
    }else{

    $(‘#results’).html(“allDone is still false”);
    }
    //$(‘#results’).html(results);

    }
    });// end of ajax
    });
    });

    And the PHP

    Code:
    < ?php $name = $_POST['name']; $email = $_POST['email']; $subject = $_POST['subject']; $message = $_POST['message']; $myEmail = 'MY@EMAIL.com'; $allDone = $_POST['allDone']; if (strlen($name) < 1) { $error['name'] = "Please enter your name in the required field"; } if (!preg_match('/^[a-z0-9&'.-_+]+@[a-z0-9-]+.([a-z0-9-]+.)*+[a-z]{2}/is', $email)) { $error['email'] = "Please enter a valid email address"; } if (strlen($subject) < 1) { $error['subject'] = "Please enter a subject."; } if (strlen($message) < 1) { $error['message'] = "Please write me a message."; } if($error == NULL){ $doneIt = true; $Body = ""; $Body .= "Name: "; $Body .= $name; $Body .= "n"; $Body .= "Email: "; $Body .= $email; $Body .= "n"; $Body .= "Message: "; $Body .= $message; $Body .= "n"; $Body .= "SEND FROM WEB FORM"; // to, sub, body, headers, params mail($myEmail, $subject, $Body, "From: <$email>“);
    echo “var allDone = true”;
    }
    else{
    $response = (isset($error[‘name’])) ? “
    ” . $error[‘name’] . “

    n” : null;
    $response .= (isset($error[’email’])) ? “

    ” . $error[’email’] . “

    n” : null;
    $response .= (isset($error[‘subject’])) ? “

    ” . $error[‘subject’] . “

    ” : null;
    $response .= (isset($error[‘message’])) ? “

    ” . $error[‘message’] . “

    n” : null;
    echo $response;
    }
    ?>

    Thanks for any help :)

    # July 15, 2009 at 8:25 am

    This is easily enough achieved. You simple specify a dataType option of "json" in your jQuery ajax call and have your php script return a json object instead of an html fragment.

    Code:
    $.ajax({
    type: ‘post’,
    url: ‘theSender.php’,
    dataType: ‘json’,
    … snip
    Code:
    echo(json_encode(array(
    ‘allDone’ => TRUE,
    ‘response’ => $response
    )));

    http://docs.jquery.com/Specifying_the_D … X_Requests

    # August 12, 2009 at 2:28 pm

    Just got back after my month and was very pleased to get this reply!

    Thanks so much for your help :)!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.