如何显示提交的联系人表单的响应（在表单下方的同一页面上），而不是在提交后将用户发送到新页面？
我见过一些人创建一个div元素，然后将收到的响应放入其中。这是推荐的方法吗？
以下是我目前所拥有的：
PHP:
<?php
$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name'];
$to = "support@loaidesign.co.uk";
$subject = "";
$message = "";
$headers = "From: $email";
if(mail($to,$subject,$message,$headers))
{
echo "<h2>Thank you for your comment</h2>";
}
else{
echo "<h2>Sorry, there has been an error</2>";
}
?>
这是HTML:
<div class="wrapperB">
<div class="content">
<form id="contactForm" action="assets/email.php" method="get">
<label for="name">Your Name</label>
<input name="name" id="name" type="text" required placeholder="Please enter your name">
<label for="email">Email Address</label>
<input name="email" id="email" type="email" required placeholder="Please enter your email address here">
<label for="message">Message</label>
<textarea name="message" id="message" required></textarea>
<button id="submit" type="submit">Send</button>
</form>
</div>
</div>
</div>
这是一个使用JQuery站点的建议示例和pajaja的答案的工作示例。
解决方案：
将其放在网页的<head>中。
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
或
下载JQuery并以相同的方式包含它。
形式：
您的联系表格保持不变。
<form id="contactForm" action="assets/email.php" Method="POST">
<label for="name">Your Name</label>
<input name="name" type="text" required placeholder="Please enter your name">
<label for="email">Email Address</label>
<input name="email" type="email" required placeholder="Please enter your email address here">
<label for="message">Message</label>
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</form>
返回的数据：
将你的响应元素添加到你想要的正文中。
<div id="contactResponse"></div>
Javascript：
现在放置（最好在</body>之前）javascript代码：
<script>
$("#contactForm").submit(function(event)
{
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
$submit = $form.find( 'button[type="submit"]' ),
name_value = $form.find( 'input[name="name"]' ).val(),
email_value = $form.find( 'input[name="email"]' ).val(),
message_value = $form.find( 'textarea[name="message"]' ).val(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post( url, {
name: name_value,
email: email_value,
message: message_value
});
posting.done(function( data )
{
/* Put the results in a div */
$( "#contactResponse" ).html(data);
/* Change the button text. */
$submit.text('Sent, Thank you');
/* Disable the button. */
$submit.attr("disabled", true);
});
});
</script>
动作脚本：
您的联系人（PHP）文件保持不变，但将$_GET更改为$_POST:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = "xxx@xxx.xxx";
$subject = "";
$message = "";
$headers = "From: $email";
if( mail($to,$subject,$message,$headers) )
{
echo "<h2>Thank you for your comment</h2>";
}
else
{
echo "<h2>Sorry, there has been an error</h2>";
}
?>
结果：
现在，它应该在提交时发送表单中的数据，然后在#contactResponse元素中显示返回的数据。该按钮还将文本设置为"已发送，谢谢"，同时禁用该按钮。
您需要使用ajax来实现这一点。最简单的解决方案是获得jQuery javascript库，使用它的.post函数，您可以在这里找到文档和示例。在你的情况下，它看起来像这样：
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name_value = $("#name").val();
var email_value = $("#email").val();
var message_value = $("#message").val();
$.post("assets/email.php", { name: name_value, email: email_value, message: message_value }).done(function(data) {
$("#response").html(data);
});
});
})
</script>
另外，您的PHP代码是错误的：
$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name']
您将获得所有3个变量的$_GET['name']。
编辑：我添加了一个完整的例子，但它没有经过测试，只是为了让你知道如何做你想做的事。此外，由于这是使用HTTPPOST请求，您将需要编辑您的PHP，以便它获得值$_POST数组，而不是$_GET。此外，您还需要添加一个<div id="response"></div>，以便在其中显示响应。
您可以将它放在同一页上。例如，如果你的表单在contact.php上，只需像这样回显你的代码：
<form action='' method='post'>
<input type='test' name='name' placeholder='Your name here' required='required' /><br />
<input type='submit' value='submit' name='contact' />
</form>
<?php
if(isset($_POST['contact']) && !empty($_POST['name'])){
echo "You submitted this form with value ".$_POST['name'].".";
}
?>
当然，这将重新加载该页面。如果您不想重新加载页面，则需要使用ajax。
我用Jquery Form插件做到了这一点。这里还有一个。
我的用例涉及得更多。它包括上传一个文件，以及一些用户输入的字段和标头中的基本身份验证凭据。Form插件使用普通的$.ajax字段来处理它们。