jQuery Ajax表单

I am getting null values from my text boxes.

The date is working perfectly but I can't get the data from the input boxes.

(function () {

    if ($('#contactform').length) {

        var $form = $('#contactform'),
            $loader = '<img src="images/preloader.gif" alt="Loading..." />';
        $form.append('<div class="hidden" id="contact_form_responce">');

        var $response = $('#contact_form_responce');
        $response.append('<p></p>');

        $form.submit(function (e) {

            $response.find('p').html($loader);

            var data = {
                action: "contact_form_request",
                values: $("#contactform").serialize()
            };

            //send data to server
            $.post("php/contact-send.php", data, function (response) {

                $(".wrong-data").removeClass("wrong-data");
                $response.find('img').remove();

                if (response.is_errors) {

                    $response.find('p').removeClass().addClass("error type-2");
                    $.each(response.info, function (input_name, input_label) {

                        $("[name=" + input_name + "]").addClass("wrong-data");
                        $response.find('p').append('Please enter correctly "' + input_label + '"!' + '</br>');
                    });

                } else {

                    $response.find('p').removeClass().addClass('success type-2');

                    if (response.info == 'success') {

                        $response.find('p').append('Your email has been sent!');
                        $form.find('input:not(input[type="submit"], button), textarea, select').val('').attr('checked', false);
                        $response.delay(1500).hide(400);
                    }

                    if (response.info == 'server_fail') {
                        $response.find('p').append('Server failed. Send later!');
                    }
                }

                // Scroll to bottom of the form to show respond message
                var bottomPosition = $form.offset().top + $form.outerHeight() - $(window).height();

                if ($(document).scrollTop() < bottomPosition) {
                    $('html, body').animate({
                        scrollTop: bottomPosition
                    });
                }

                if (!$('#contact_form_responce').css('display') == 'block') {
                    $response.show(450);
                }

            });

            e.preventDefault();

        });

    }

})();

And here is the php:

require_once "../includes/database.php";

$cname    = $_POST['name'];
$cemail   = $_POST['email'];
$cmessage = $_POST['message'];
$date     = date("Y-m-d");  
$sql      = "INSERT INTO messages (sendername,senderemail,message,datesent) VALUES (:name,:email,:message,:date)";
$qry      = $db->prepare($sql);

$qry->execute(array(
  ':name'    =>$cname,
  ':email'   =>$cemail,
  ':message' =>$cmessage,
  ':date'    =>$date
));

Try moving the e.preventDefault() to the beginning of the function. Otherwise the form may be submitting without waiting to execute all the jQuery

post you're form html code

try wrapping your code with

$('document').ready(function() {

  });

The problem is with the way your assigning the POST data to your $.post function.

Troublesome Code

var data = {
   action: "contact_form_request",
   values: $("#contactform").serialize()
};

What's happening is the data is beind sent back as a multidimensional array and you need to include that on your php page.

Try changing $_POST['name'] to $_POST['values']['name'] to match the format of your jQuery. You'll need to make this change for each of your POST variables. You can always do var_dump($_POST); die; to ensure the nesting of the array.

I should mention, if you want to access your POST data directly (like in your original php) you should check out the jQuery .post() documentation.

The syntax to access your POST directly ($_POST['name']) would require the following code:

$.post('mypostpage.php', $('myform').serialize(), function(response) {
    //do work
});