Question

我设计了一个联系表单，除了一件事之外它很有用。每当有人没有填写字段或者输入的电子邮件地址输入错误时，它就会停止发送表单，但如果您再次尝试输入信息并点击发送，则不会执行任何操作。如何在不消除输入信息的情况下让表格能够再次发送？

表格可在以下网址查看：

有谁知道我该怎么做？

表格：

<form action="" method="post" id="mycontactform" >
    <input type="text" class="inputbar" name="name" placeholder="Full Name" required>
    <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
    <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
    <label for="contactButton">
        <input type="button" class="contactButton" value="Send Message" id="submit">
    </label>
</form>

Jquery的：

$(document).ready(function(){

                $('#submit').click(function(){

                    $.post("contactSend.php", $("#mycontactform").serialize(),  function(response) {
                        if (response == 'Your email was sent!') {
                            $('#contactMessageStatus').append(response);
                            $('#contactMessageStatus').addClass("contactSuccess");
                            $('html, body').animate({
                                scrollTop: $("#contactMessageStatus").offset().top
                             }, 2000);
                            $('#contactMessageStatus').html(response);
                            $('#contactMessageStatus').delay(5500).fadeOut(400);
                        }
                        else {
                            $('#contactMessageStatus').append(response);
                            $('#contactMessageStatus').addClass("contactFail");
                            $('html, body').animate({
                                scrollTop: $("#contactMessageStatus").offset().top
                             }, 2000);
                            $('#contactMessageStatus').html(response);
                            $('#contactMessageStatus').delay(5500).fadeOut(400);
                        }
                    });
                    return false;
                });
            });

发送表单的PHP脚本：

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$to = 'contact@sundayfundayleague.com';
$subject = 'SFL Contact Form Submitted';
$message = 'FROM: '.$name. "<br>" . ' Email: '.$email. "<br>" . 'Message: '.$message;
$headers = 'From: contact@sundayfundayleague.com' . "\r\n";

if (!empty($email)) { 
    if (filter_var($email, FILTER_VALIDATE_EMAIL)) { 

        //Should also do a check on the mail function
        if (mail($to, $subject, $message, $headers)) {
            echo "Your email was sent!"; // success message
        } else {
            echo "Mail could not be sent!"; // failed message
        }

    } else { 
        //Invalid email
        echo "Invalid Email, please provide a valid email address.";
    }

} else {
    echo "Email Address was not filled out.";
}

更新：你的意思是这样，加上信息区吗？

 if (!empty($email)) { 
    if (filter_var($email, FILTER_VALIDATE_EMAIL)) { 

    //Should also do a check on the mail function
    if (mail($to, $subject, $message, $headers)) {
        echo "Your email was sent!"; // success message
    } else {
        echo "Mail could not be sent!"; // failed message
    }
    if($name!== ''){ /*success*/ 
    } else { echo "Please enter a name";
    }

} else { 
    //Invalid email
    echo "Invalid Email, please provide a valid email address.";
}

Answer 1

您需要再次显示状态，因为之前的错误已逐渐消失。

尝试

$(document).ready(function(){

    $('#submit').click(function(){
        $.post("contactSend.php", $("#mycontactform").serialize(),  function(response) {
            if (response == 'Your email was sent!') {
                $('#contactMessageStatus').addClass("contactSuccess");
                $('html, body').animate({
                    scrollTop: $("#contactMessageStatus").offset().top
                 }, 2000);
                $('#contactMessageStatus').html(response);
                $('#contactMessageStatus').show();
                $('#contactMessageStatus').delay(5500).fadeOut(400, function(){ $(this).removeClass("contactSuccess"); });
                $('#mycontactform').trigger('reset');
            }
            else {
                $('#contactMessageStatus').addClass("contactFail");
                $('html, body').animate({
                    scrollTop: $("#contactMessageStatus").offset().top
                 }, 2000);
                $('#contactMessageStatus').html(response);
                $('#contactMessageStatus').show();
                $('#contactMessageStatus').delay(5500).fadeOut(400, function(){ $(this).removeClass("contactFail"); });
            }
        });
        return false;
    });
});

至于额外的错误消息：

 if (!empty($email) && filter_var($email, FILTER_VALIDATE_EMAIL)) { 
     if($name!== ''){
          //Should also do a check on the mail function
          if (mail($to, $subject, $message, $headers)) {
              echo "Your email was sent!"; // success message
          } else {
              echo "Mail could not be sent!"; // failed message
          }
     } else { 
          echo "Please enter a name";
     }
} else { 
    //Invalid email
    echo "Invalid Email, please provide a valid email address.";
}

获取表单重置

1 个答案: