2013-01-07 35 views
0

jQuery的AJAX形式:只加載圖像和犯規停止和成功的消息不工作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)); 
+0

有什麼其他選擇與我的jQuery代碼?我仍然想使用加載圖像.. –

+0

我們需要看到的代碼,迴應從PHP的UI而不是如何存儲它:) – AbstractChaos

回答

0

我覺得你的問題是在這裏:

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

+0

我已經在響應中添加了$符號,但仍然有同樣的錯誤。 PHP工作正常,但我的數據庫中獲得空值。加載圖片不停止,我沒有收到任何響應消息。 :( –

+0

你提供了'dataType ='json''作爲'$ post()'。 – Jai

+0

no。怎麼做那個先生? –