9

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

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

4 回答 4

13

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

于 2013-08-11T11:19:15.430 回答
2

您可以将其保留在同一页面上。例如，如果您的表单是 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'].".";
   }
?>

当然，这将重新加载该页面。如果不想重新加载页面，则需要使用ajax。

于 2013-08-11T11:01:11.083 回答
2

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

你的PHP代码也是错误的：

$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name']

您将获得$_GET['name']所有 3 个变量。

编辑：我添加了一个完整的例子，但它没有经过测试，只是为了让你知道如何做你想做的事。此外，由于这是使用 HTTP POST 请求，您将需要编辑您的 PHP，以便它获取 values$_POST数组，而不是$_GET. 此外，您还需要添加一个<div id="response"></div>要显示响应的位置。

于 2013-08-11T10:39:49.253 回答
0

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

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

于 2014-02-25T14:50:03.543 回答