PHP表单提交而无需重新加载

Question

I wanted to have the contact form in my webpage but I wanted it so that it does not refresh or open a new tab while submission. 我希望在我的网页中有联系表，但我希望它不提交时刷新或打开新标签。 I followed this question Submit a php form and display its result on div without reloading page and implimented it. 我遵循了这个问题，提交了一个php表单，并在不重新加载页面的情况下将其结果显示在div上，这没有任何暗示。

It's working now. 现在正在工作。 It sends an email but does not take values from the contact form. 它发送电子邮件，但不从联系表单中获取值。 ie: The email body should be 即：电子邮件正文应为

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

But it's always : 但这总是：

Name: 
Email: 
Message:

Any help would be greatly appreciated. 任何帮助将不胜感激。

Here's my HTML 这是我的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>

Here's my PHP : 这是我的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

Using a html form element instead of a div should do the trick: 使用html表单元素代替div应该可以解决问题：

replace: 更换：

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

with 同

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

should work. 应该管用。 For more information see http://api.jquery.com/serialize/ 有关更多信息，请参见http://api.jquery.com/serialize/

Answer 2

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

Gives a blank value as an output, however 给出一个空白值作为输出，但是

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

Therefore, your <div id = "contact-me"> should turn into a form and in the click handler you would need to call preventDefault() on the event. 因此，您的<div id = "contact-me">应该变成一种形式，并且在点击处理程序中，您需要在事件上调用preventDefault() 。

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

This would work too. 这也可以。

Answer 3

Run this HTML its working fine. 运行此HTML可以正常工作。

Use HTML form data instead of a div . 使用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