php 在同一页面上显示提交的表单响应。（没有重装）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18171017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show submitted form response on the same page. (No Reload)
提问by avitex
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?
我看到有些人创建了一个 div 元素，然后将收到的响应放入其中。这是推荐的方法吗？
Here is what I have so far:
这是我到目前为止所拥有的：
PHP:
PHP：
<?php
$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name'];
$to = "[email protected]";
$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>";
}
?>
and here is the HTML:
这是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>
回答by avitex
This is a working example using the suggested example from the JQuerysiteand pajaja'sanswer.
这是一个使用来自JQuery站点的建议示例和pajaja 的答案的工作示例。
Solution:
解决方案：
Place this in the <head>of your webpage.
将此放在<head>您网页的 。
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
OR
或者
Download JQueryand include it the same way.
下载JQuery并以相同的方式包含它。
Form:
形式：
Your contact form remains un-changed.
您的联系表格保持不变。
<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:
返回数据：
Add your response element where you want in the body.
在正文中所需的位置添加响应元素。
<div id="contactResponse"></div>
<div id="contactResponse"></div>
Javascript:
Javascript：
Now place (preferably just before </body>) the javascript code:
现在放置（最好就在之前</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>
Action Script:
动作脚本：
Your contact (PHP)file remains the same but change $_GET to $_POST:
您的联系人(PHP)文件保持不变，但将 $_GET 更改为 $_POST：
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = "[email protected]";
$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:
结果：
This should now send the data from the form on submit and then display the returned data in the #contactResponseelement. The button will also set the text to "Sent, Thank you" while also disabling the button.
现在应该在提交时从表单发送数据，然后在#contactResponse元素中显示返回的数据。该按钮还将文本设置为“已发送，谢谢”，同时禁用该按钮。
回答by pajaja
You will need to use ajax for that. The simplest solution is to get jQueryjavascript library an use it's .postfunction for which you can find documentation and examples here. In your case it will look something like this:
为此，您将需要使用 ajax。最简单的解决方案是让jQueryjavascript 库使用它的.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>
Also your PHP code is wrong:
你的 PHP 代码也是错误的：
$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name']
You are getting $_GET['name']for all 3 variables.
您将获得$_GET['name']所有 3 个变量。
edit:
I added a complete example but it is not tested it's just so you can have an idea how to do what you want. Also since this is using HTTP POST request, you will need to edit your PHP so it gets values $_POSTarray, not $_GET. Also you will need to add a <div id="response"></div>where you want to display the response.
编辑：我添加了一个完整的例子，但它没有经过测试，只是为了让你知道如何做你想做的事。此外，由于这是使用 HTTP POST 请求，因此您需要编辑 PHP 以获取值$_POST数组，而不是$_GET. 此外，您还需要添加一个<div id="response"></div>要显示响应的位置。
回答by jdepypere
You can just keep it on the same page. For example, if your form is on contact.php, just echo your code like so:
您可以将其保留在同一页面上。例如，如果您的表单是 on 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'].".";
}
?>
Of course this will reload that page. If you don't want the page to be reloaded, you need to use ajax.
当然，这将重新加载该页面。如果不想重新加载页面，则需要使用ajax。
回答by Dean Schulze
I did this with the Jquery Form Plugin. There's another here.
我用Jquery Form Plugin做到了这一点。还有一个在这里。
My use casewas a lot more involved. It included uploading a file along with some user entered fields and basic auth credentials in the header as well. The Form plugin handled them all using the normal $.ajax fields.
我的用例涉及更多。它包括上传文件以及一些用户输入的字段和标题中的基本身份验证凭据。Form 插件使用普通的 $.ajax 字段处理它们。
