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);
    } 

}

防止人们在没有页面刷新的情况下发送多个表单

1 个答案: