AJAX isn't sending any information with $_POST

Question

I followed a tutorial on fancybox and an AJAX query for a contact form. The only thing I changed was the location of the .php file that has all of the sendmail information in. The e-mail sends when you fill out the contact form, but there's no data in it at all.

Here's the form:

<div id="inline">
<h1>Send us a Message</h1>
<hr>

<form id="contact" name="contact" action="#" method="post">
    <label for="email">Your E-mail</label>
    <input type="email" id="email" name="email" class="txt">
    <br>
    <label for="msg">Enter a Message</label>
    <textarea id="msg" name="msg" class="txtarea"></textarea>

    <button id="send">Send E-mail</button>
</form>
</div>

And the AJAX code;

<script type="text/javascript">
function validateEmail(email) { 
    var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|    (\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return reg.test(email);
}

$(document).ready(function() {
    $(".modalbox").fancybox();
    $("#contact").submit(function() { return false; });


    $("#send").on("click", function(){
        var emailval  = $("#email").val();
        var msgval    = $("#msg").val();
        var msglen    = msgval.length;
        var mailvalid = validateEmail(emailval);

        if(mailvalid == false) {
            $("#email").addClass("error");
        }
        else if(mailvalid == true){
            $("#email").removeClass("error");
        }

        if(msglen < 4) {
            $("#msg").addClass("error");
        }
        else if(msglen >= 4){
            $("#msg").removeClass("error");
        }

        if(mailvalid == true && msglen >= 4) {

            $("#send").replaceWith("<em>sending...</em>");

            $.ajax({
                type: 'POST',
                url: 'contactforms/send_gm.php',
                data: $("#contact").serialize(),
                success: function(data) {
                    if(data == "true") {
                        $("#contact").fadeOut("fast", function(){
                            $(this).before("<p><strong>Subspace message has been transmitted successfully.</strong></p>");
                                setTimeout("$.fancybox.close()", 2000);
                        });
                    }
                }
            });
        }
    });
});
</script>

the send_gm.php page is this;

<?php
$sendto   = "blah@blah.com";
$usermail = $_POST['email'];
$content  = nl2br($_POST['msg']);

$subject  = "Contact Us: Game Management Query";
$headers  = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($content) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";

$msg  = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2>New User Feedback</h2>\r\n";
$msg .= "<p><strong>Sent by:</strong> ".$usermail."</p>\r\n";
$msg .= "<p><strong>Message:</strong> ".$content."</p>\r\n";
$msg .= "</body></html>";


if(@mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
    echo "false";
}

?>

As far as I was aware, that line was there to enable the button i've created (button id="send") to be used to submit the form through AJAX, rather than handled by the form itself. Is that correct? — Cthulhuite, Jan 07 '14 at 16:22
Try removing the `action` attr and using full `url`. You can visit [this link](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Hasib Mahmud, Jan 07 '14 at 16:31
I used one of the suggestions on that page and changed the ajax to this, but still no luck. It's as if the data isn't getting pushed to the php page. var frm = $('#contact'); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function(data) { — Cthulhuite, Jan 07 '14 at 17:32
Same thing, it submits but there's no data on the outputted e-mail. — Cthulhuite, Jan 07 '14 at 18:56
Did you get the message `Subspace message has been transmitted successfully.` in fancybox? — JFK, Jan 07 '14 at 19:08
I do get that message. The form submits, the email sends, the issue is that there's no data. Either it's being stripped out or it's not being sent correct from AJAX. — Cthulhuite, Jan 07 '14 at 19:37

score 0 · Answer 1 · edited May 23 '17 at 12:28

Try something like this:

<form id="contact" name="contact">
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="msg">Enter a Message</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>

<input type="button" name="submit" value="send email" onclick="sendEmail()"/>
</form>

jquery script:

 function sendEmail()
  {
   var emailval  = $("#email").val();
   var msgval    = $("#msg").val();

   $.ajax({
            type: 'POST',
            url: 'contactforms/send_gm.php',
            data: {email: emailval, msg: msgval}
   })
   .done(function( msg ) {
    alert (msg);
   }

php script:

 <?php
 $usermail = $_POST['email'];
 $content  = $_POST['msg'];
 // for rest of the part of php script view the following link
 ?>

Here is the link send html email

Edit

I have remove action and method attr and in javascript now data:{email: emailval, msg: msgval} before email: email, msg: msg

I tried that, still no luck. The e-mail sends but there's no data, the variables are empty. It does redirect to a "true" page afterwards though. — Cthulhuite, Jan 07 '14 at 20:39

AJAX isn't sending any information with $_POST

1 Answers1

Edit