Question

jquery ajax form: loading image only and doesnt stop and success message not working

this is my contact form

            <form method="post" action="" class="comments-form" id="contactform" />

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

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

                <p class="input-block">
                    <label for="message">Message:</label>
                    <textarea name="message" id="message" cols="30" rows="10"></textarea>   
                </p>

                <p class="input-block">
                    <button class="button default" type="submit" id="submit">Submit</button>
                </p>

            </form>

and this is my jquery ajax function that is not working

(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');
        var $p
        $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) {

                response = $.parseJSON(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 this is my contact-send.php that saves the message in my database.

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

Answer 1

I think your issue is here:

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

            response = $.parseJSON(response);
       //--^--------------------------------------missing '$' 

            $(".wrong-data").removeClass("wrong-data");
            $response.find('img').remove();
      //----^------------------------------------used the '$' for other codes

try to put a $ here and see if this solves the issue:

$response = $.parseJSON(response);

and if you are getting some ajax errors plz mention it.