如何在提交的联系表单（表单下方的同一页面）上显示回复，而不是在提交后将用户发送到新页面？
我看到有些人创建了一个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>
答案 0 :(得分：11)
这是一个使用suggested example from the JQuery site和 pajaja's 答案的工作示例。
将其放在网页的 <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>
现在放置（最好在 </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元素中显示返回的数据。该按钮还将文本设置为“已发送，谢谢”，同时也禁用该按钮。
答案 1 :(得分：2)
你需要使用ajax。最简单的解决方案是让jQuery javascript库使用它的.post函数，您可以找到文档和示例here。在你的情况下，它看起来像这样：
<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']。
修改：
我添加了一个完整的示例，但它没有经过测试，因此您可以了解如何做您想做的事情。此外，由于这是使用HTTP POST请求，您需要编辑PHP以使其获得值$_POST数组，而不是$_GET。此外，您还需要在要显示响应的地方添加<div id="response"></div>。
答案 2 :(得分：2)
您可以将它保存在同一页面上。例如，如果您的表单位于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。
答案 3 :(得分：0)
我用Jquery Form Plugin做了这个。还有另一个here。
My use case涉及的内容更多。它包括上传文件以及一些用户输入的字段和标题中的基本身份验证凭据。 Form插件使用普通的$ .ajax字段处理它们。