Jquery Ajax聯繫表單在Jqmodal ajax彈出窗口中

大家好我正在使用Jqmodal在我的網站上創建聯繫表單彈出窗口。聯繫表單正確加載並顯示，但聯繫表單本身我試圖使用ajax提交，然後要給用戶一條消息，說明「發送消息」並將表單向上滑動。Jquery Ajax聯繫表單在Jqmodal ajax彈出窗口中

無論如何，我遇到的主要問題是提交表單，但需要用戶通過ajax連接到實際的php文件。我的代碼如下。這可能是Jqmodal方面的一些事情，但我不確定是否有人可以指出我的方向太棒了。另外關閉按鈕不起作用，但我認爲我可以解決這個問題。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 

<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

<script src="http://www.modernizr.com/downloads/modernizr.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script type='text/javascript'> 
$(document).ready(function() { 
    $("#submit").click(function() { 
     var action = $("#contact_form").attr('action'); 
     var form_data = { 
      code:$("#code").val(), 
      name:$("#name").val(), 
      email:$("#email").val(), 
      message:$("#message").val(), 
      is_ajax:1 
     }; 
     $.ajax({ 
      type:"POST", 
      url:action, 
      data:form_data, 
      success: function(response) 
      { 
       if(response == 'success') 
        $("#form").slideUp('slow', function() { 
         $("#message").html("<p class='success'>Your Message Has Been Sent.</p>"); 
        }); 
       else 
        $("#message").html("<p class='error'>Code was typed incorecctly.</p>"); 
      } 
     }); 
     return false; 
    }); 

    // refresh captcha 
    $('#refresh').click(function() { 
     change_captcha(); 
    }); 

    function change_captcha(){ 
     document.getElementById('captcha').src="./static/classes/get_captcha.php?rnd="+Math.random(); 
    }; 
}); 
</script> 
<link href="./static/css/style.css" rel="stylesheet" type="text/css" media="screen"> 
<link href='http://fonts.googleapis.com/css?family=Quantico:400,700' rel='stylesheet' type='text/css'> 

</head> 
<body> 
    <span id="close"> 
     <button class="jqmClose">Close</button> 
    </span> 
    <br/><br/> 
    <form name="contact_form" method="POST" action="./static/classes/contact.php" enctype="application/x-www-form-urlencoded"> 
     <input id="name" name="name" type="text" placeholder="Full Name..." required> 
     <br/> 
     <input id="email" name="email" type="email" placeholder="Your Email..." required> 
     <br/> 
     <input id="message" name="message" type="text" placeholder="Your Message..." required> 
     <br/> 
     <section id="captcha_area"> 
      <img src="./static/classes/get_captcha.php" alt="" id="captcha" /> 
      <br/> 
      <input name="code" type="text" id="code"> 
     </section> 
     <section id="refresh">?</section> 
     <br clear="all" /><br clear="all" /> 
     <input type="submit" id="submit" value="Send"> 
    </form> 
    <span id="message"></span> 
</body> 
</html>

來源

2012-02-26 Sam

將$("#submit").click(function() {更改爲=>$("#submit").click(function(e) { e.preventDefault();。其餘的代碼是相同的。這將停止提交操作的默認行爲。

或者您可以使用，.submit事件。

來源

2012-02-26 15:09:53 SachinGutte

非常感謝，但它仍然繼續把用戶加入contact.php頁面後按提交：/我仍然搞亂它，試圖自己修復它，但再次建議將是真棒。 – Sam 2012-02-26 15:18:49

您的表單沒有將'id'屬性設置爲'contact_form'，因此它沒有針對ajax請求的url。那麼我試過這個，它不會把我帶到php頁面。 – SachinGutte 2012-02-26 15:26:16

請在本地機器上檢查您的javasscript，以查找錯誤。如果它在任何時候都包含錯誤，它就會停止執行語句。 – SachinGutte 2012-02-26 15:33:33

Jquery Ajax聯繫表單在Jqmodal ajax彈出窗口中

回答

相關問題