Question

我希望在我的网页中提供联系表单，但我希望它在提交时不会刷新或打开新标签页。我遵循了这个问题Submit a php form and display its result on div without reloading page并对其进行了褒奖。

现在正在运作。它会发送一封电子邮件，但不会从联系表单中获取值。即：电子邮件正文应

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 个答案: