一页联系表 PHP 和脚本答案

【问题标题】：One Page Contact Form PHP & Script一页联系表 PHP 和脚本
【发布时间】：2015-10-10 23:15:34
【问题描述】：

我正在制作一个单页网站，我想在一个部分中添加一个联系表。所以我正在使用 PHP，事情是，我似乎找不到任何基本的预制表单，它们不会打开新网页或在提交后将您引导到新页面。我想保留这一页，所以一旦表单中的所有内容都正确并且已提交，我希望出现一个叠加层。没有弹出窗口或重定向。这可能需要 jQuery，但我不知道如何把它放进去，所以它实际上是这样做的。

这是我在 HTML 中设置表单的方式：

 <form action="mail.php" method="post" enctype="multipart/form-data" >
      <label></label>
        <input name="name" required placeholder="Your Name">
        <label></label>
        <input name="email" type="email" required placeholder="Your Email">
        <label></label>
        <textarea name="message" cols="20" rows="5" required placeholder="Message"></textarea>     
       <input id="submit" name="submit" type="submit" value="Submit">

    </form>

这里是mail.php

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: Website'; 
$to = 'email@emailhere.com'; 
$subject = 'Email Inquiry';

$body = "From: $name\n E-Mail: $email\n Message:\n $message";?>

<?php
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) { 
echo '<p>Thank you for your message! </p>';
} else { 
echo '<p>An error occurred. Try sending your message again.</p>'; }}?>

现在，我希望能够删除感谢消息的回声，并将其替换为我制作的叠加层的 jQuery 代码。

$(document).ready(function() {
    $("#overlay").show();
    });

我错过了该功能的一部分，因为现在它只会在页面准备好时显示。但我不知道把它放在哪里/它如何与这个 PHP 一起工作。

我的困惑是，当您点击提交时，我不确定 PHP 会告诉它转到某个空白页面的位置，所以我不知道在哪里停止和启动脚本。我也只是不知道如何将这一切正确地融合在一起。它是在 PHP 中还是在我让它检查所有元素的脚本中，然后才能调用“谢谢覆盖”。我只是真的不知道从这里往哪个方向走。

非常感谢您抽出宝贵时间。我自己学习了很多，所以我的知识是零散的。

如果我能帮助解决任何问题，请告诉我。

-rj

【问题讨论】：

删除 if ($_POST['submit']) { 之前的
@jewelhuq 如果你只删除它，它会产生语法错误......

标签： php jquery html forms overlay

【解决方案1】：

看看 jQuery Ajax。通常，您通过转到另一个页面由服务器抛出数据，因此您执行“同步”请求。 Ajax 技术使您能够在发出请求时留在页面上，这是一个“异步”请求。 JQuery 使 Ajax 请求更加简单。祝你好运；）

【讨论】：

【解决方案2】：

尝试在#submit 按钮上添加onclick 事件并在表单中使用Javascript XMLHttpRequest 对象而不是action="mail.php"

【讨论】：

【解决方案3】：

这是从示例中起作用的，希望它可以将您推向正确的道路:)

在提交按钮后立即添加此字符串

<span class="status"></span>

PHP

if($mail_sent){
  echo "<span class='notice'>Your message has been sent, thank you.</span>";
  exit;
}else{
  echo "<span class='error'>We couldn't send your message please try again, thank you.</span>";
  exit;
}

和JS部分显示错误

jQuery(function($) {
    $("#contact-form").submit(function(){
        return false;
    })
  $("#contact-form input[type=submit]").click(function(event){
        var formerror = false;

        $(this).attr('disabled', 'disabled').css({'cursor': 'auto', 'opacity': 0.5});
        $('.status').fadeIn('normal').html('Loading please wait...');

        $(this).closest("form").find("input, textarea").each(function(){
            error = false;
            switch($(this).attr('id')){
                case 'name':
                    if($(this).val().match(/^[a-zA-Z\ \']+$/) == null || $(this).val() == "Name")
                        error = true;
                    else
                        error = false;

                    break;

                case 'email': 
                    if($(this).val().match(/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/) == null)
                        error = true;
                    else
                        error = false;

                    break;

                case 'message':
                    if($(this).val().length < 4 || $(this).val() == "Type your message")
                        error = true;
                    else
                        error = false;

                    break;
            }
            if(error){
                $(this).css('border-color', '#f00');
                formerror = true;
            }
        });

        if(formerror){
            $('.status').fadeOut('normal', 
                                function(){
                                    $(this).html("One or more required fields are missing or invalid, please correct and resend.")
                                             .addClass("error");
                                }
                            ).fadeIn();

            $(this).removeAttr('disabled').css({'cursor': 'pointer', 'opacity': 1});

            event.preventDefault();
        }else{

            //get teh link
            $.post( "contact.php", { name: $('#name').val(), 
                                         email: $('#email').val(), 
                                         website: $('#website').val(), 
                                         message: $('#message').val() 
                                        })
            .done(function( data ) {
                $('.status').removeClass('error').fadeIn('normal', function(){$(this).html(data)});
                $("#contact-form input[type=submit]").removeAttr('disabled').css({'opacity': 1, 'cursor': 'pointer'});
            });

            event.preventDefault();
        }
    });
});

【讨论】：