javascript - 防止人们在不刷新页面的情况下发送多个表单

Question

我目前有一个可用的 PHP/AJAX 表单。它在发送表单时或出现错误时显示表单消息。但是，发送表单时页面不会刷新，因此只需双击(或更多次点击)即可轻松发送多封电子邮件。看看我的代码:

HTML

<form action="" 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="text" 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>
                            <button class="mail-submit" id="mail-submit" type="submit" name="submit">Versturen</button>
                            <span style="color: #0184b2; text-align: center; font-size: 20px; margin: 0 auto; display: block; padding-top: 10px;" class="form-message"></span>
                        </ul>
                    </form>

JS

            $("form").on("submit",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("donation-contact.php",
                    {
                    name: name,
                    lastname: lastname,
                    email: email,
                    phone: phone,
                    submit: "yes"
                    },
                    function(data){
                        $(".form-message").html( data );
                    }
                );
                });

PHP

<?php

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


    $email_to = "#";

    $email_subject = "#";

    $name = $_POST['name'];
    $lastname = $_POST['lastname'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];


    $errorEmpty = false;
    $errorEmail = false;

    if (empty($name)) {
      echo "<span class='form-error'>Voer de verplichte 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";
      $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, $email_subject, $formcontent, $mailheader);
      echo "<span class='form-success'>De mail is verzonden!</span>";
    }

  }


?>

我试过在按下表单按钮时禁用它。如果用户没有犯任何错误，这将起作用，但它也会在显示错误消息时禁用该按钮。

有没有办法只在发送表单时禁用按钮？或者在发送表单时删除所有表单输入？

谢谢你的时间

Answer 1

您所需要的一切基本上已经存在于您的代码中。

你拦截提交通过

$("form").on("submit",function(event){ 
            event.preventDefault();
     // ...

这是禁用提交按钮的地方:

$("form").on("submit",function(event){ 
    event.preventDefault();

    $('#mail-submit').prop('disabled', true);

    // ...
});

但是您需要在 PHP 脚本中进行不同的处理，以便您可以处理错误。基本上你需要发回一个JSON object它将具有指示状态(错误/成功)的简单文本属性和消息的文本属性(可能包含 HTML)。

PHP

if (empty($name)) {
    $response = array('status' => 'error', 'message' => '<span class='form-error'>Voer de verplichte velden in!</span>');
    $errorEmpty = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $response = array('status' => 'error', 'message' => '<span class='form-error'>Geef een geldig E-mail!</span>');
    $errorEmail = true;
}
else {
    // send email...
    $response = array('status' => 'success', 'message' => '<span class='form-success'>De mail is verzonden!</span>');
}

// No matter what happened, send the respons as a JSON object for easy treatment in JavaScript
echo json_encode($response);

现在在 JavaScript 中，您将收到一个对象，而不是回调函数中的文本:

function(data) {
    $(".form-message").html( data.message );

    // If there was an error you must re-enable the submit button 
    if (data.status === 'error') {
        $('#mail-submit').prop('disabled', false);
    } 

}