在同一页面上显示提交的表单响应。（没有重装）答案

【问题标题】：Show submitted form response on the same page. (No Reload)在同一页面上显示提交的表单响应。（没有重装）
【发布时间】：2013-08-12 19:43:15
【问题描述】：

我将如何显示来自已提交联系表单的响应（在表单下方的同一页面上），而不是在提交后将用户发送到新页面？

我见过一些人创建一个 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>

【问题讨论】：

你使用了responds这个词。你能给我们定义一下吗？你的意思是response？
回复文字是这两个： echo "
Thank you for your comment
"; } else{ echo "
抱歉，出现错误2>";我想在同一页面/ div 上而不是在新页面上显示它们。
对不起，这是我的误解。

标签： php forms jquery

【解决方案1】：

我用Jquery Form Plugin 做到了这一点。还有一个here。

My use case 参与度更高。它包括上传文件以及一些用户输入的字段和标题中的基本身份验证凭据。 Form 插件使用普通的 $.ajax 字段来处理它们。

【讨论】：

【解决方案2】：

这是一个使用 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>

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 元素中显示返回的数据。该按钮还会将文本设置为“已发送，谢谢”，同时还会禁用该按钮。

【讨论】：

如果电子邮件发布成功，是否可以将发送按钮从说（发送到“已发送，谢谢你”）更改为 CSS 样式？如果电子邮件不成功，只显示一个错误？
@Leo 请参阅上面我修改后的答案，希望对您有所帮助:)
谢谢，我也注意到你已经从 HTML 中删除了 Method="Post"，我也需要这样做吗？正如我所拥有的那样
@Leo 由于 JQuery 接管了提交事件，并且现在正在使用 ajax，Method="Post" 然后变得无用。 编辑：再三考虑，留给非 JavaScript 用户使用。
@Leo 签入调试器后，似乎.button("refresh"); 不需要，我在示例中删除了它。

【解决方案3】：

您可以将其保留在同一页面上。例如，如果您的表单位于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。

【讨论】：

【解决方案4】：

您需要为此使用 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>。

【讨论】：

当我做一些研究时，我已经看到了这个解决方案并试图在我已经拥有的东西上实施，但我没有让它工作，这对我来说是全新的，无论如何你可以展示我如何植入我当前的代码？

Thank you for your comment

抱歉，出现错误2>";我想在同一页面/ div 上而不是在新页面上显示它们。

解决方案：

表格：

返回数据：

Javascript：

动作脚本：

结果：