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.

*May or may not contain any actual "CSS" or "Tricks".