javascript - 发送表单后难以显示成功消息

Question

我仍在学习用于创建表单的代码语言。所以我似乎无法弄清楚问题所在。这是我的代码:

HTML:

<form action="mail.php" method="POST">
    <ul class="form-style-1">
        <li>
            <input type="text" id="mail-name" name="name" class="field-divided" maxlength="15"  placeholder="Voornaam *" />&nbsp;<input type="text" id="mail-lastname" name="lastname" class="field-divided" maxlength="15" placeholder="Achternaam" >
        </li>
        <li>
            <input type="email" id="mail-email" name="email" placeholder="E-mail *" class="field-long" maxlength="40" >
        </li>
        <li>
            <input type ="text" id="mail-phone" name="phone" placeholder="Telefoonnummer" class="field-long" maxlength = "15">
        </li>
        <li>
            <select name="subject" id="mail-subject" class="field-select" >
                <option disabled value="" selected hidden >--Onderwerp-- *</option>
                <option value="Kennismakingsgesprek">Kennismakingsgesprek</option>
                <option value="Meer informatie">Meer informatie</option>
                <option value="activiteit">Aanmelding activiteit</option>
                <option value="Vraag/klacht">Vraag/klacht</option>
                <option value="Contact">Overig</option>
            </select>
        </li>
        <li>
            <textarea name="information" id="mail-information"  placeholder =" Je bericht *"class="field-long field-textarea" maxlength="2000"></textarea>
        </li>
        <button class="mail-submit" id="mail-submit" type="submit" name="submit">Send e-mail</button>
        <span class="form-message"></span>
    </ul>
</form>

JS:

$(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        var name = $("#mail-name").val();
        var name = $("#mail-lastname").val();
        var email = $("#mail-email").val();
        var phone = $("#mail-phone").val();
        var subject = $("#mail-subject").val();
        var information = $("#mail-information").val();
        $(".form-message").load("mail.php", {
            name: name,
            lastname: lastname,
            email: email,
            phone: phone,
            subject: subject,
            information: information
        });
    });
});

**PHP:**

<?php

if (isset($_POST['submit'])) {

    $email_to = "#";
    $email_subject = "#";
    $name = $_POST['name'];
    $lastname = $_POST['lastname'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $subject = $_POST['subject'];
    $information = $_POST['information'];

    $errorEmpty = false;
    $errorEmail = false;

    if (empty($name) || empty($lastname) || empty($email) || empty($phone) || empty($subject) || empty($information)) {
        echo "<span class='form-error'>Voer alle velden in!</span>";
        $errorEmpty = true;
    }
    elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "<span class='form-error'>Geef een geldig E-mail!</span>";
        $errorEmail = true; 
    }
    else {
        $formcontent=" Naam: $name \n\n Achternaam: $lastname \n\n Email: $email \n\n Telefoon: $phone \n\n Onderwerp: $subject \n\n Informatie: $information";
        $mailheader = "From: ".$_POST["email"]."\r\n"; 
        $headers = "From: ". htmlspecialchars($_POST['name']) ." <" . $_POST['email'] . ">\r\n";
        $headers .= "Reply-To: " . $_POST['email'] . "\r\n";
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
        mail($email_to, $subject, $formcontent, $mailheader);
        echo "<span class='form-success'>E-mail has been sent!</span>";
    }
}
else {
    echo "Not working!";
}
?>

我知道这一行代码基本上阻止了表单执行任何操作:

$('form').submit(function (event) {
        event.preventDefault();

没有这行代码，表单就可以工作。但它不会在表单下获取显示消息，而是将您发送到其中包含文本的回显页面。

我想要的是表单发送后页面不刷新，以便它可以显示表单成功或错误消息。

感谢您的宝贵时间。

Answer 1

您应该像这样使用ajax，例如在提交表单时

$("#mail-submit").click(function(event){
    event.preventDefault();
    var name = $("#mail-name").val();
    var lastname = $("#mail-lastname").val();
    var email = $("#mail-email").val();
    var phone = $("#mail-phone").val();
    var subject = $("#mail-subject").val();
    var information = $("#mail-information").val();
    $.post("mail.php",
        {
          name: name,
          lastname: lastname,
          email: email,
          phone: phone,
          subject: subject,
          information: information,
          submit: "yes"  // this is for your php if isset($_POST['submit'])
        },
        function(data){
            $(".form-message").html( data ); // put return in html element
        }
    );
});

如果您需要更多详细信息，请告诉我