簡體   English   中英

jQuery Ajax表單成功消息不起作用

[英]jquery ajax form success message not working

jQuery Ajax形式:僅加載圖像並且不停止並且成功消息不起作用

這是我的聯系表格

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

這是我的jQuery ajax函數不起作用

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

        });             

    }

})();

這是我的contact-send.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));

我認為您的問題在這里:

$.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

嘗試將$放在此處,看看這是否可以解決問題:

$response = $.parseJSON(response);

if you are getting some ajax errors plz mention it.

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM