联系表单发送带有空消息字段的邮件

Question

When i send an email with my contact form the textarea value does not send and the "message:" field is always empty in the email.

Declaring the input variables manually in jquery instead of using serialize gives the same result.

The textarea is inside the form tags so i have no idea why its value is not picked up and posted.

I've tried giving the textarea an id="message" and calling it manually in jquery like: var text = $("#message").val(); and var text = $("textarea#message").val(); but it still doesn't send.

I don't know what i'm doing wrong. Please help.

Here is my code:

    <form id="contactForm" method="POST">
            <div class="row small-margin">
                <div class="col-md-4">
                    <i class="pe-7s-user pe-2x icon-contact"></i>
                    <input name="name" type="text" placeholder="Name(required)" required size="35">
                </div> 
                <div class="col-md-4">
                    <i class="pe-7s-mail pe-2x icon-contact"></i>
                    <input name="email" type="email" placeholder="Email(required)" required size="35">
                </div>
                <div class="col-md-4">
                    <i class="pe-7s-link pe-2x icon-contact"></i>
                    <input name="website" type="text" placeholder="Website" size="35">
                </div>
            </div>
            <div class="row small-margin">
                <div class="col-md-12">
                    <!-- Message Field -->
                    <textarea name="message" placeholder="Your Message(required)" required></textarea>
                    <!-- Submit Button -->
                    <button id="submit" name="submit" type="submit" class="button" value="submit">SEND MESSAGE</button>
                    <!-- Success Message -->
                    <div id="msgSubmit" class="alert alert-success text-center hidden">Message Sent Successfully</div>
                </div>
            </div>
</form>

And JS:

$("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
console.log( $( this ).serialize() );
});


    $.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: "name=" + name + "&email=" + email + "&website=" + website + "&message=" + text,
        success : function(text){
            if (text == "success"){
                formSuccess();
            }
        }
    });
}
function formSuccess(){
    $( "#msgSubmit" ).removeClass( "hidden" );
}

And PHP:

<?php
    // Set variables
    $name = $_POST['name'];
    $email = $_POST['email'];
    $website = $_POST['website'];
    $message = $_POST['text'];

    $to = '[e-mail]'; 
    $subject = 'New Message from Nixo';

    // Prepare email body text
    $Body .= "Name: ";
    $Body .= $name;
    $Body .= "
";

    $Body .= "Email: ";
    $Body .= $email;
    $Body .= "
";

    $Body .= "Website: ";
    $Body .= $website;
    $Body .= "
";

    $Body .= "Message: ";
    $Body .= $message;
    $Body .= "
";

    // Send email
    $success = mail($to, $subject, $Body, "From:".$email);

    if ($success){
       echo "success";
    }else{
        echo "<p>Something went wrong, please try again!</p>";
    }
?>

Answer 1

I found the issue on your code:

the Values from textarea never made it the Server side, because you are doing this in your PHP:

$message = $_POST['text'];

You should do this in order to get the value from textarea:

$message = $_POST['message'];

This will solve your issue :). Hope it helps.