Question

var text = $("input#text").val();
    if (text == "") {
          $("input#text").focus();
          alert("Please complete all fields");
          return false;
    }

I have this jquery above to validate a textarea called “text”. This, along with other values, get .ajax sent to a php page for sending an email. The email comes through fine with everything else in ok, but the textarea comes through as “undefined”? Any ideas? Do i need to post some more code?

EDIT:

Rest of the code:

the php:

                      $email = $_REQUEST['email'] ;
                      $text = $_REQUEST['text'] ;
                      $name = $_REQUEST['name'] ;
                      $detail = "Name: ".$name."\nMessage: ".$text;
                      mail( "xxxxxxxxx", "Subject: Contact Form",
                      $detail, "From: $email" );
                      echo "Thank you for getting in touch";

complete jquery:

$(function() {

$(‘#submit’).live(‘click’,function(){

    var name = $("input#name").val();
    if (name == "") {
          $("input#name").focus();
          alert("Please complete all fields");
          return false;
    }

    var email = $("input#email").val();
    if (email == "") {
          $("input#email").focus();
          alert("Please complete all fields");
          return false;
    }

    var text = $("input#text").val();
    if (text == "") {
          $("input#text").focus();
          alert("Please complete all fields");
          return false;
    }

    var dataString = 'name=' + name + '&email=' + email + '&text=' + text;
    //alert (dataString);return false;

    $.ajax({
  type: "POST",
  url: "mailform.php",
  data: dataString,
  success: function() {
    alert("Thanks, we will be in touch soon");
  }
 });
return false;
});

});

The html:

<form method='post' action='mailform.php' class="form">

                <p class="name">
                <label for="name">Name</label>
                    <input type="text" name="name" id="name" />    
                </p>

                <p class="email">
                    <label for="email">E-mail</label>
                    <input type="text" name="email" id="email" />            
                </p>

                <p class="text">
                    <label for="text">Nature of Enquiry</label>
                    <textarea id="text" name="text"></textarea>
                </p>

                <p class="submit">
                    <input type="submit" id="submit" value="Send" />
                </p>

            </form>

Answer 1

I had a similar problem and my problem was with the php code. Try yo have a look there see if the #textarea gets _POST – ed correctly.

I am using this and works perfectly for me:

//we need to get our variables first

$email_to =   '[e-mail]'; //the address to which the email will be sent
$name     =   $_POST['name'];  
$email    =   $_POST['email'];
$subject  =   $_POST['subject'];
$message  =   $_POST['message']. "\n\n";

/*the $header variable is for the additional headers in the mail function,
 we are asigning 2 values, first one is FROM and the second one is REPLY-TO.
 That way when we want to reply the email gmail(or yahoo or hotmail...) will know 
 who are we replying to. */
$headers  = "From: $email\r\n";
$headers .= "Reply-To: $email\r\n";

if(mail($email_to, $subject, $message, $headers)){
    echo 'sent'; // we are sending this text to the ajax request telling it that the mail is sent..      
}else{
    echo 'failed';// ... or this one to tell it that it wasn't sent    
}

Not sure what’s going on, like the other user said I believe to be a problem with the way the data is being carried over to the php script.

Try to look into $.post and serialize() functions that jquery can offer:

to give you an idea:

    var error = false;
    var name = $('#name').val();
    var email = $('#email').val();
    var subject = $('#subject').val();
    var message = $('#message').val();

— Due some checks to see if the info is correct—

    if(error == false){
        //#contact_form has all the variables that get serialized and sent to the php
          and you can get a message back to check if everything went okay.
        $.post("your_php_code.php", $("#contact_form").serialize(),function(result){
            //and after the ajax request ends we check the text returned
            if(result == 'sent'){
                //if the mail is sent remove the submit paragraph
                 $('#cf_submit_p').remove();
                //and show the mail success div with fadeIn
                $('#mail_success').fadeIn(500);
            }else{
                //show the mail failed div
                $('#mail_fail').fadeIn(500);
                $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
            }
        });