PHP表單提交而無需重新加載

Question

我希望在我的網頁中有聯系表，但我希望它不提交時刷新或打開新標簽。 我遵循了這個問題，提交了一個php表單，並在不重新加載頁面的情況下將其結果顯示在div上，這沒有任何暗示。

現在正在工作。 它發送電子郵件，但不從聯系表單中獲取值。 即：電子郵件正文應為

Name: (name entered in the form)
Email: (email entered in the form)
Message: (message entered in the form)

但這總是：

Name: 
Email: 
Message:

任何幫助將不勝感激。

這是我的HTML

 <!DOCTYPE html> <html> <head> <title>FeedBack Form With Email Functionality</title> <style> .result{ padding: 20px; font-size: 16px; background-color: #ccc; color: #fff; } #contactme{ position:absolute; top:100px; width:833px; height:450px; background:#FFF; font-size:16px; color:#FFF; } #sub_button:hover{ cursor:pointer; } #sub_button { background:#F00; border: 0; display: block; width: 161px; height: 28px; } </style> </head> <body> <div id="contactme" style="font-family: 'Josefin Sans', sans-serif"> <div> <input type="text" id="name" name="name" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" /> </div> <div> <input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" /> </div> <div> <textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off" ></textarea> </div> <div id="sub_button" style="position:absolute; top:30px; right:30px;"></div> </div> <div class="result"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('#sub_button').click(function() { $.ajax({ type:"post", url:"insert1.php", data: $("#contactme").serialize(), success: function(response){ $(".result").html(response); } }); }); }); </script> </body> <!-- body ends here --> </html>

這是我的PHP：

 <?php // Get values from form $name=$_POST['name']; $email=$_POST['email']; $data=$_POST['message']; $to = "email@gmail.com"; $subject = "From The Website"; $message = " Name: " . $name . "\\r\\n Email: " . $email . "\\r\\n Message: " . $data; $from = $name; $headers = "From:" . $from . "\\r\\n"; $headers .= "Content-type: text/plain; charset=UTF-8" . "\\r\\n"; if(@mail($to,$subject,$message,$headers)) { echo "Message was sent successfully!"; echo '<script>alert("Message was sent successfully!");</script>'; }else{ echo '<script>alert("Error in sending message! Please mail your message to email@gmail.com");</script>'; echo "Error in sending message! Please mail your message to email@gmail.com"; } echo '<script> self.close(); </script>'; ?>

Answer 1

使用html表單元素代替div應該可以解決問題：

更換：

<div id="contactme" style="font-family: 'Josefin Sans', sans-serif">
    <!-- [...] -->
</div>

同

<form id="contactme" method="post" style="font-family: 'Josefin Sans', sans-serif">
     <!-- [...] -->
</form>

應該管用。 有關更多信息，請參見http://api.jquery.com/serialize/

Answer 2

$("<div id = 'test'><input name = 'zzz' value = 'zzz'/></div>").serialize()
""

給出一個空白值作為輸出，但是

$("<form id = 'test'><input name = 'zzz' value = 'zzz'/></form>").serialize()
"zzz=zzz"

因此，您的<div id = "contact-me">應該變成一種形式，並且在點擊處理程序中，您需要在事件上調用preventDefault() 。

$("#test").on('submit',function(e) {
e.preventDefault();
//Your ajax logic
});

這也可以。

Answer 3

運行此HTML可以正常工作。

使用HTML form數據而不是div 。

<form id="contactme" method="post">
    <div style="font-family: 'Josefin Sans', sans-serif">
        <div>
        <input type="text" id="name" name="name" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />
        </div>

        <div>
        <input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" />
        </div>

        <div>
        <textarea  id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off"  ></textarea>
        </div>

        <div id="sub_button" style="position:absolute; top:30px; right:30px;"></div>
 </div>   
</form>
<div class="result"></div>

PHP表單提交而無需重新加載

問題描述

3 個解決方案

解決方案1
3 已采納 2015-03-19 06:53:54

解決方案2
2 2015-03-19 07:00:56

解決方案3
1 2015-03-19 06:59:43

PHP表單提交而無需重新加載

問題描述

3 個解決方案

解決方案1 3 已采納 2015-03-19 06:53:54

解決方案2 2 2015-03-19 07:00:56

解決方案3 1 2015-03-19 06:59:43

解決方案1
3 已采納 2015-03-19 06:53:54

解決方案2
2 2015-03-19 07:00:56

解決方案3
1 2015-03-19 06:59:43