在同一页面显示提交的表单回复。 （没有重装） [英] Show submitted form response on the same page. (No Reload)
问题描述
我会如何显示提交的联系表单（在表单下的同一页面上）的响应，而不是在提交后将用户发送到新页面？
我看到有人创建了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>感谢您的评论< / h2> ;
}
else {
echo< h2>对不起，有错误< / 2>;
}
？>
以下是 HTML ：
< div class =wrapperB>
< div class =content>
< form id =contactFormaction =assets / email.phpmethod =get>
< label for =name>您的名称< / label>
< input name =nameid =nametype =textrequired placeholder =请输入您的名字>
< label for =email>电子邮件地址< / label>
< input name =emailid =emailtype =emailrequired placeholder =请在此输入您的电子邮件地址>
< label for =message> Message< / label>
< button id =submittype =submit>发送< / button>
< / form>
< / div>
< / div>
< / div>
这是一个使用来自 JQuery 网站的建议示例和 pajaja's 答案。
解决方案：
将其放置在您网页的 < head> 中。
OR 下载 JQuery 和 您的联络表格保持不变。 添加您的回复 现在放置（最好在 em>（PHP）文件保持不变，但将$ _GET更改为$ _POST： 现在应该发送来自表单上的数据提交，然后将返回的数据显示在 How would I go about showing the response from a submitted contact form (on the same page underneath the form) rather than sending the user to a new page after the submission? I have seen some people creating a div element, and then putting the received response into it. Is that a recommended approach? Here is what I have so far: PHP: and here is the HTML:
This is a working example using the suggested example from the JQuery site and pajaja's answer. Place this in the OR Download JQuery and include it the same way. Your contact form remains un-changed.
Add your response element where you want in the body. Now place (preferably just before
Your contact (PHP) file remains the same but change $_GET to $_POST:
This should now send the data from the form on submit and then display the returned data in the 这篇关于在同一页面显示提交的表单回复。 （没有重装）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< script src =http://code.jquery.com/jquery-1.10.1.min.js>< / script>
表格：
< form id =contactFormaction =assets / email.phpMethod =POST>
< label for =name>您的名称< / label>
< input name =nametype =textrequired placeholder =请输入您的姓名>
< label for =email>电子邮件地址< / label>
< input name =emailtype =emailrequired placeholder =请在此输入您的电子邮件地址>
< label for =message> Message< / label>
< textarea name =messagerequired>< / textarea>
< button type =submit>发送< / button>
< / form>
返回的数据：
< div id =contactResponse>< / div>
Javascript：
之前< / body> ）javascript代码：
< script>
$（＃contactForm）。submit（函数（事件）
{
/ *停止表单正常提交* /
event.preventDefault（）;
/ *从页面上的元素获取一些值：* /
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（），$ b $ url = $ form.attr（'action'） ;
/ *使用信息发送数据* /
var posting = $ .post（url，{$ b $ name：name_value，
email：email_value，
message：message_value
}）;
posting.done（函数（数据）
{
/ *把结果放在div * /
$（#contactResponse）.html（data）;
/ *更改按钮文本。 * /
$ submit.text（'发送，谢谢'）;
/ *禁用按钮。 * /
$ submit.attr（disabled，true）;
}）;
}）;
< / script>
动作脚本：
<？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>感谢您的评论< / h2> ;
}
else
{
echo< h2>对不起，有错误< / h2>;
}
？>
结果：
#contactResponse 元素中。该按钮还将文本设置为已发送，谢谢，同时禁用该按钮。<?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>";
}
?>
<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>
Solution:
<head> of your webpage.<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>Form:
<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>
Returned Data:
<div id="contactResponse"></div>Javascript:
</body>) the javascript code:<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>
Action Script:
<?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>";
}
?>
Result:
#contactResponse element. The button will also set the text to "Sent, Thank you" while also disabling the button.
