【问题标题】:Php contact form open a new pagephp联系表打开一个新页面
【发布时间】:2018-12-06 08:31:36
【问题描述】:

我正在建立一个网站并有一个php 联系表。

表单验证和mail() 函数运行良好。

我的php 表格文件是handler.php

现在解决问题。当我按下提交按钮并出现错误消息时,它们会出现在一个新的空白页面中,该页面与URL 相同,但它在URL 中添加了/handler.php

我想做的是让错误消息显示在表单下,如果没有错误,我希望它转到我的thankyoumessage.html

这是表单的php 代码:

<?php

/*Set the mail of the reciever*/
$myemail  = "mymail@example.com";

/*Display error message*/
function show_error($myError)
    {
    ?>
        <html>
        <body>

        <b>Var snäll och rätta till följande fel:</b><br />
        <?php echo $myError; ?>

        </body>
        </html>
    <?php
    exit();
    }
    
/* Check inputs */
function check_input($data, $problem='error')
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    // if ($problem && strlen($data) == 0)
    // {
    //     show_error($problem);
    // }
    return $data;
}

if (isset($_POST['email']) && isset($_POST['name']) && isset($_POST['message'])) 
{

    /* Check all form inputs using check_input function */
    $name = check_input(utf8_decode($_POST['name']));
    $subject  = check_input(utf8_decode($_POST['subject']));
    $email    = check_input(utf8_decode($_POST['email']));
    $message = check_input(utf8_decode($_POST['message']));

    /* If e-mail is not valid show error message */
    if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email))
    {
        show_error("Email adressen är inte giltig...");
        echo "<script type='text/javascript'>alert('$message');</script>";
    }
    /*If name is empty show error message */
    if (empty($_POST['name'])) 
    {
        show_error("Du måste skriva in ditt namn...");
    }
    /*If email is empty show error message */
    if (empty($_POST['email'])) 
    {
        show_error("Du måste skriva in din email...");
    }
    /*If message is empty show error message */
    if (empty($_POST['message'])) 
    {
        show_error("Ett meddelande krävs om du önskar att få hjälp av oss...");
    }

    /* Prepare the message for the e-mail */
    $mail =utf8_decode("
    Hej!

    Ditt kontakt formulär har blivit besvarat av:

    Namn: $name

    E-mail: $email

    Kundens meddelande:
    $message

    Meddelande slut.
    ");
    
    echo "Tack för du kontaktar oss! \n Vi återkommer med ett svar så snart som möjligt!";

    /* Send the message using mail() function */
    mail($myemail, $subject, $mail);
}
else
{
    ?><span><?php echo "Fyll i alla fälten...";?></span> <?php
}
?>

这是Html 的表单:

<form class="mt-5 ml-5 mr-5" method="POST" action="handler.php" id="reused_form">
        <p id="contactForm" class="h4 text-center mt-5"><strong>Kontakta oss</strong></p>

        <!-- input text(Name) -->
        <div class="md-form">
            <i class="fa fa-user prefix">*</i>
            <input type="text" name="name" id="name" class="form-control">
            <label>Ditt namn</label>
        </div>

        <!-- input email -->
        <div class="md-form mt-5">
            <i class="fa fa-envelope prefix">*</i>
            <input type="email" id="name" name="email" id="email" class="form-control validate">
            <label data-error="Fel" data-success="Rätt">Din email</label>
        </div>

        <div class="md-form mt-5">
            <i class="fa fa-user prefix"></i>
            <input type="text" id="subject" name="subject" class="form-control">
            <label>Ämne</label>
        </div>

        <!-- input message -->
        <div class="md-form mt-5">
            <i class="fa fa-pencil prefix">*</i>
            <textarea type="text" name="message" id="message" maxlength="5000" class="form-control md-textarea" rows="3"></textarea>
            <label>Meddelande</label>
        </div>

        <div class="text-center mt-4 mb-4">
            <button class="btn danger-color" name="submit" type="submit">Skicka</button>
        </div>
    </form>

【问题讨论】:

  • 在声明 &lt;?php - ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(-1); 之后将其添加到您的 php 脚本中,您应该会看到问题的原因
  • 好吧,您当前的设置是一个简单的表单操作,无论如何都会将用户带到handler.php。你所描述的需要AJAX。所以你需要一层 JavaScript 来拦截表单提交,通过 AJAX 发送数据,然后在收到结果时执行两件事之一(显示错误消息或转到感谢页面)。
  • 如果错误显示错误,请通过ajax提交相同的表单,否则您可以重定向到thanksyou页面
  • 我同意@Utkanos。如果您不想在出现错误时离开页面,则需要使用 ajax 处理服务器响应并检查错误以显示任何错误消息。
  • 非常感谢你! - @Utkanos

标签: php html contact-form


【解决方案1】:

如果你不想使用 AJAX,你可以让 mail() 函数在同一页面中处理表单,如下所示:

<?php 
// we declare empty error variables
$error = $error_email = $error_name = $error_subject = $error_message = "";
if (isset($_POST['submit'])) 
{

    /* Check all form inputs using check_input function */
    $name = check_input(utf8_decode($_POST['name']));
    $subject  = check_input(utf8_decode($_POST['subject']));
    $email    = check_input(utf8_decode($_POST['email']));
    $message = check_input(utf8_decode($_POST['message']));

    /* If e-mail is not valid show error message */
    if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email))
    {
        $error_email = "Email adressen är inte giltig...";

    }
    /*If name is empty show error message */
    if (empty($_POST['name'])) 
    {
         $error_name = "Du måste skriva in ditt namn...";
    }
    /*If email is empty show error message */
    if (empty($_POST['email'])) 
    {
         $error_email = "Du måste skriva in din email...";
    }
    /*If message is empty show error message */
    if (empty($_POST['message'])) 
    {
         $error_message = "Ett meddelande krävs om du önskar att få hjälp av oss...";
    }

    /// You can add the subject validations here as well
    if (empty($_POST['subject'])) 
    {
         $error_subject = "Ett meddelande krävs om du önskar att få hjälp av oss...";
    }

    /* Prepare the message for the e-mail */
    $mail =utf8_decode("
    Hej!

    Ditt kontakt formulär har blivit besvarat av:

    Namn: $name

    E-mail: $email

    Kundens meddelande:
    $message

    Meddelande slut.
    ");

    if(mail($myemail, $subject, $mail))
    {
    /// We redirect to the thank you mesage uppon a successful message sending
     header("Location:thankyoumessage.html");  
    }
    else 
    {
    // Failure message if the mail() function failed to trigger
    $error = "Something wrong !";
    }
}
?>

    <form class="mt-5 ml-5 mr-5" method="POST" action="" id="reused_form">
    <p id="contactForm" class="h4 text-center mt-5"><strong>Kontakta oss</strong></p>

    <!-- input text(Name) -->
    <div class="md-form">
        <i class="fa fa-user prefix">*</i>
        <input type="text" name="name" id="name" class="form-control" required >
        <label>Ditt namn</label>
    </div>
    <!-- Error name -->
    <div class="text-center mt-4 mb-4">
    <?php echo $error_name;?>
    </div>

    <!-- input email -->
    <div class="md-form mt-5">
        <i class="fa fa-envelope prefix">*</i>
        <input type="email" id="name" name="email" id="email" class="form-control validate" required>
        <label data-error="Fel" data-success="Rätt">Din email</label>
    </div>

    <!-- Error email -->
    <div class="text-center mt-4 mb-4">
    <?php echo $error_email;?>
    </div>

    <div class="md-form mt-5">
        <i class="fa fa-user prefix"></i>
        <input type="text" id="subject" name="subject" class="form-control" required>
        <label>Ämne</label>
    </div>

    <!-- Error subject -->
    <div class="text-center mt-4 mb-4">
    <?php echo $error_subject;?>
    </div>


    <!-- input message -->
    <div class="md-form mt-5">
        <i class="fa fa-pencil prefix">*</i>
        <textarea type="text" name="message" id="message" maxlength="5000" class="form-control md-textarea" rows="3" required></textarea>
        <label>Meddelande</label>
    </div>

    <!-- Error message -->
    <div class="text-center mt-4 mb-4">
    <?php echo $error_message;?>
    </div>

    <div class="text-center mt-4 mb-4">
    <?php echo $error;?>
    </div>

    <div class="text-center mt-4 mb-4">
        <button class="btn danger-color" name="submit" type="submit">Skicka</button>
    </div>
</form>

【讨论】:

  • 是的,重定向到感谢页面是有效的,但是当我在 html 代码中添加 php 标记时,它有问题:( 我使用的是 Visual Studio 代码,文本是只是全白......
  • 您收到的错误信息究竟是什么?如果是关于编辑器,您可以使用任何通用编辑器,如 Notepad++,然后再试一次。另外,您正在处理的文件扩展名是 *.HTML 还是 *.PHP ?
  • 我提到了我的handler.php,而我的html扩展名是.html
  • 您是否尝试完全按照我的回答运行脚本?将整个内容粘贴到 index.php 或 filename.php 或whatever.php 中的文件中,然后尝试
  • 哦,所以它需要是一个php文件而不是一个html?
【解决方案2】:

听起来您需要在一个页面中使用它,但您的表单正在指向第二个页面 (handler.php)。在加载表单和处理表单提交的单个脚本中拥有所有功能可能会让您受益。算法可能是这样的:

$showForm = $showThankYou = false;
$errorMessage = '';
//if form submitted
  //check for errors 
  //if no errors
    $showThankYou = true;
  //else set error vars appropriately
    $errorMessage = '...';
    $showForm = true;
// else
$showForm = true;

从这一点开始,您可以在条件句中包含您的表单和感谢您。您可以在表单 html 中包含错误消息,因为首次加载表单时它将是空白的。

if($showForm) {
  // form code block
}

if($showThankYou) {
  // thank you page
}

【讨论】:

  • 不推荐这样做 - 更好地分解脚本
【解决方案3】:

因为设置在表单动作上,所以会去 /handler.php:

<form class="mt-5 ml-5 mr-5" method="POST" action="handler.php" id="reused_form">

如果您想在表单提交后留在同一页面上,则必须将操作留空。相反,您必须设置一个条件来检查是否设置了提交:

    if(isset($_POST['submit']){
       include('handler.php');
    }

在表单下方添加该代码将在用户点击提交时执行脚本(您必须对其进行修改,它必须是一个非按钮)。

这是仅使用 PHP 的一种方法。你也可以把所有发送邮件的代码放在一个函数里面,在提交的时候执行:

function sendMail(){
    if (isset($_POST['email']) && isset($_POST['name']) && isset($_POST['message'])) 
    {

        /* Check all form inputs using check_input function */
        $name = check_input(utf8_decode($_POST['name']));
        $subject  = check_input(utf8_decode($_POST['subject']));
        $email    = check_input(utf8_decode($_POST['email']));
        $message = check_input(utf8_decode($_POST['message']));

        /* If e-mail is not valid show error message */
        if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email))
        {
            show_error("Email adressen är inte giltig...");
            echo "<script type='text/javascript'>alert('$message');</script>";
        }
        /*If name is empty show error message */
        if (empty($_POST['name'])) 
        {
            show_error("Du måste skriva in ditt namn...");
        }
        /*If email is empty show error message */
        if (empty($_POST['email'])) 
        {
            show_error("Du måste skriva in din email...");
        }
        /*If message is empty show error message */
        if (empty($_POST['message'])) 
        {
            show_error("Ett meddelande krävs om du önskar att få hjälp av oss...");
        }

        /* Prepare the message for the e-mail */
        $mail =utf8_decode("
        Hej!

        Ditt kontakt formulär har blivit besvarat av:

        Namn: $name

        E-mail: $email

        Kundens meddelande:
        $message

        Meddelande slut.
        ");

        echo "Tack för du kontaktar oss! \n Vi återkommer med ett svar så snart som möjligt!";

        /* Send the message using mail() function */
        mail($myemail, $subject, $mail);
    }
    else
    {
        ?><span><?php echo "Fyll i alla fälten...";?></span> <?php
    }
}

更改提交代码

<?php 

include('handler.php');

if(isset($_POST['submit'])){
    sendMail();
}
?>

还有其他方法,但这两种可能会以仅使用 PHP 的方式解决您的问题。

希望对你有帮助。

PD:您的姓名和电子邮件输入具有相同的 ID。

【讨论】:

    【解决方案4】:

    听起来您需要 JavaScript,因为用户永远不会离开页面。如果你让 handler.php 返回一些 json 而不是页面,这将非常容易。首先,我会将您所有的 HTML 放入一个名为 contact.html 的文件中,这样您就可以引用与当前所在页面不同的页面。如果你在正文中任意位置添加一个空的&lt;p class="errorMsg"&gt;&lt;/p&gt;,它将不可见,直到出现错误。

    然后您可以将以下脚本添加到名为submitForm.js 的文件中,将&lt;script src="submitForm.js"&gt;&lt;/script&gt; 添加到contact.html 的头部。

    const formElement = document.querySelector('form')
    const formData = new FormData(formElement)
    formElement.onsubmit = event => {
      event.preventDefault()
      fetch('/handler.php', { method: 'POST', body: formData })
        .then(response => response.json())
        .then(json => {
          const errorElement = document.querySelector('errorMsg')
          errorElement.textContent = json.errorMsg
          if (json.errorMsg !== '') document.location = '/thankyoumessage.html'
        })
    }
    

    为了分解它, fetch 是一种非常简单的 ajax 请求方法。您的用户将停留在当前页面上,但您的代码将转到 URL 并获取其数据以在当前页面上使用。 fetch() 发出请求,then() 得到响应后同步处理。在这里,我链接了两个 then()s,因为我需要先将其解析为 json,然后才能访问该数据。最后一个then() 是您处理表单提交的方式。

    Learn more about fetch

    Fetch 是一种新的 Web API,它依赖于 ES6 功能,可能与旧版浏览器不兼容。我仍然鼓励您使用它,因为即使需要 IE11 支持,也只需 polyfillsyntax converter 即可为您完成所有工作。

    现在,要让 fetch 像这样工作,您需要在 handler.php 中输入一些内容。您可以使用第一个 sn-p 中的所有代码,而无需使用 HTML。您只需构建一个字符串并回显它即可返回 JSON,无需 html。您可以通过将 show_error() 函数调用更改为分配 $errorMsg 变量来完成此操作,如下所示。

    if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email))
    {
        $errorMsg = "Email adressen är inte giltig...";
    }
    

    然后在文件的末尾,您可以像这样编写 JSON 字符串,而不是 HTML。

    echo '{ "errorMsg" : "' . $errorMsg . '" }';
    

    现在,例如,如果您的表单仍然以电子邮件错误访问该页面,您会看到:

    { "errorMsg" : "Email adressen är inte giltig..." }

    ... 显然你不想看到那个,但是你的 JavaScript 可以在你的用户不看它的情况下看到它,并且 JavaScript 知道如何处理这些数据,就像我们在上面看到的那样。然后,您可以在该 JSON 中添加任意数量的内容,以便您的实时 JavaScript 可以使用它做其他事情。

    Learn more about JSON

    【讨论】:

    • 对于一个简单的联系表格之类的东西来说,完全是矫枉过正。
    • 不太清楚你的意思:(
    • @luddep 我扩大了我的答案。
    • @Adam 怎么这么矫枉过正?这是迄今为止发出 ajax 请求的最简单和最短的方法。如果处理程序是用 php 编写的,它就无法处理实时的客户端更改。
    • @Adam 如果操作不需要 IE11 支持(他们不应该),他们不需要编译器,我认为fetch() 更易于理解和维护比使用 XMLHttpRequest 的解决方案 - 特别是对于 JS 新手。我没有看到问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多