在同一页面上显示提交的表单回复.(没有重装)

Question

在同一页面上显示提交的表单回复.(没有重装)

如何从提交的联系表单(在表单下面的同一页面)上显示响应,而不是在提交后将用户发送到新页面？

我看到有些人创建了一个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>";
}

?>

Run Code Online (Sandbox Code Playgroud)

这是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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

avi*_*tex 11

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

Run Code Online (Sandbox Code Playgroud)

退货数据:

将您的响应元素添加到正文中.

<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>

Run Code Online (Sandbox Code Playgroud)

动作脚本:

您的联系人(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>";
    }

?>

Run Code Online (Sandbox Code Playgroud)

结果:

现在应该在提交时从表单中发送数据,然后在#contactResponse元素中显示返回的数据.该按钮还将文本设置为"已发送,谢谢",同时也禁用该按钮.

归档时间：	12 年，10 月前
查看次数：	40311 次
最近记录：	8 年，10 月前