CODEWITHSUNDEEP
phpjqueryajax
JB De Asis
JB De Asis

Reputation: 43

jquery ajax form

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
));

Upvotes: 0

Views: 177

Answers (3)

phpisuber01
phpisuber01

Reputation: 7715

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
});

Upvotes: 2

Crazy Chuck
Crazy Chuck

Reputation: 555

post you're form html code

try wrapping your code with 

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

  });

Upvotes: 0

cjds
cjds

Reputation: 8426

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

Upvotes: 0

Related Questions