Question

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

表单和mail()函数的验证工作正常。

我用于表单的php文件是handler.php。

现在是问题所在。当我按下“提交”按钮并且出现错误消息时，它们出现在新的空白页面中，并且该页面是相同的URL，但它在/handler.php中添加了URL。

我想做的是使错误消息显示在表格下方，如果没有错误，我希望它进入我的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>

如果有人可以帮助我解决“问题”，我会很高兴。

谢谢！

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

Answer 2

听起来像您需要JavaScript，因为用户将永远不会离开页面。如果使handler.php返回一些json而不是页面，这将非常简单。首先，我将所有HTML放入一个名为contact.html的文件中，以便您可以引用与当前页面不同的页面。如果您在任意位置向正文添加空的<p class="errorMsg"></p>，它将一直不可见，直到出现错误为止。

然后，您可以将以下脚本添加到名为submitForm.js的文件中，并将<script src="submitForm.js"></script>添加到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'
    })
}

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

Learn more about fetch

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

现在，要使提取工作像这样，您需要在handler.php中放入一些内容。您可以在第一个代码段中使用所有代码，而不必使用HTML。您可以通过构建字符串并回显它来返回JSON，而无需html。您可以通过更改show_error（）函数调用以分配一个$ errorMsg变量来实现此目的。

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

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

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

现在，如果您的表单仍然以例如电子邮件错误的形式访问该页面，您将看到以下内容：

{“ errorMsg”：“通过电子邮件发送adressenärinte giltig ...”}

...显然，您不想看到它，但是您的JavaScript可以在您的用户没有看到它的情况下看到它，并且JavaScript确切地知道如何处理这些数据，就像我们上面看到的那样。然后，您可以向该JSON添加任意数量的内容，以便您的实时JavaScript可以使用它执行其他操作。

Learn more about JSON

Answer 3

听起来好像您需要在单个页面中这样做，但是您的表单正指向第二个页面（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
}

Answer 4

它要转到/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。

PHP联系表格打开新页面

4 个答案: