javascript - jquery fadeIn 和 fadeOut 在单击之前不起作用

Question

我有一个这样的表格。

<form method="post" action="contact-post.php" id="contact_form" name="contactForm">
                     <div class="left_form">
                        <div>
                            <span><label>NAME</label></span>
                            <div id='name_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
                            <span><input name="name" id="name" type="text" class="textbox"></span>
                        </div>
                        <div>
                            <span><label>E-MAIL</label></span>
                            <div id='email_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
                            <span><input name="email" id="email" type="text" class="textbox" required></span>
                        </div>
                        <div>
                            <span><label>PHONE</label></span>
                            <div id='phone_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
                            <span><input name="phone" id="phone" type="text" class="textbox"></span>
                        </div>
                    </div>
                    <div class="right_form">
                        <div>                           
                            <span><label>SUBJECT</label></span>
                            <div id='message_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
                            <span><textarea name="message" id="message" required> </textarea></span>
                        </div>
                        <div id='mail_success' class='success' style="background-color:#BFD6BF;text-align:center;margin-bottom:5px;">Your message has been sent successfully.</div>
                        <div id='mail_fail' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Sorry, error occured this time sending your message.</div>
                        <div id="submit">
                            <span><input type="submit" id="send_message" name="submit" value="Submit" class="myButton"></span>
                        </div>
                    </div>
                    </form>

我称它为一个 .js 文件。

$(document).ready(function(){
    $('#send_message').click(function(e){

        //Stop form submission & check the validation
        e.preventDefault();

        // Variable declaration
        var error = false;
        var name = $('#name').val();
        var email = $('#email').val();
        var subject = $('#phone').val();
        var message = $('#message').val();

        // Form field validation
        if(name.length == 0){
            var error = true;
            $('#name_error').fadeIn(500);
        }else{
            $('#name_error').fadeOut(500);
        }
        if(email.length == 0 || email.indexOf('@') == '-1'){
            var error = true;
            $('#email_error').fadeIn(500);
        }else{
            $('#email_error').fadeOut(500);
        }
        if(subject.length == 0){
            var error = true;
            $('#phone_error').fadeIn(500);
        }else{
            $('#phone_error').fadeOut(500);
        }
        if(message.length == 0){
            var error = true;
            $('#message_error').fadeIn(500);
        }else{
            $('#message_error').fadeOut(500);
        }

        // If there is no validation error, next to process the mail function
        if(error == false){
           // Disable submit button just after the form processed 1st time successfully.
            $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });

            /* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/
            $.post("contact-post.php", $("#contact_form").serialize(),function(result){
                //Check the result set from email.php file.
                if(result == 'sent'){
                    //If the email is sent successfully, remove the submit button
                     $('#submit').remove();
                    //Display the success message
                    $('#mail_success').fadeIn(500);
                }else{
                    //Display the error message
                    $('#mail_fail').fadeIn(500);
                    // Enable the submit button again
                    $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
                }
            });
        }
    });    
});

还有一个 contact-post.php 文件。

<?php
include('config.php');
if (isset($_POST['submit'])) {
$name=$_POST['name'];
$mail=$_POST['email'];
$phone=$_POST['phone'];
$msg=$_POST['message'];
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
test_input($name);
$query="INSERT INTO `inquiry` (id,name,contact,email,query) values ('','$name','$phone','$mail','$msg')";
$qur=mysql_query($query);
    if ($qur) {
        echo 'sent';
    }
    else {
        echo 'failed';
    }
}
?>

我的问题是当我刷新页面时它显示如下。

我希望在单击提交按钮之前不显示所有消息。请帮助我。

Answer 1

更新(添加片段):

.error , .success
{
    display:none;
}

<form method="post" action="contact-post.php" id="contact_form" name="contactForm">
                     <div class="left_form">
                        <div>
                            <span><label>NAME</label></span>
                            <div id='name_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
                            <span><input name="name" id="name" type="text" class="textbox"></span>
                        </div>
                        <div>
                            <span><label>E-MAIL</label></span>
                            <div id='email_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
                            <span><input name="email" id="email" type="text" class="textbox" required></span>
                        </div>
                        <div>
                            <span><label>PHONE</label></span>
                            <div id='phone_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
                            <span><input name="phone" id="phone" type="text" class="textbox"></span>
                        </div>
                    </div>
                    <div class="right_form">
                        <div>                           
                            <span><label>SUBJECT</label></span>
                            <div id='message_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
                            <span><textarea name="message" id="message" required> </textarea></span>
                        </div>
                        <div id='mail_success' class='success' style="background-color:#BFD6BF;text-align:center;margin-bottom:5px;">Your message has been sent successfully.</div>
                        <div id='mail_fail' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Sorry, error occured this time sending your message.</div>
                        <div id="submit">
                            <span><input type="submit" id="send_message" name="submit" value="Submit" class="myButton"></span>
                        </div>
                    </div>
                    </form>

您可以执行以下操作之一:

设置error和 success类显示为无，因为它们将使用 fadeIn 函数显示。

.error , .success
{
    display:none;
}

或者

您可以隐藏 <div> s 加载 jQuery 如下:

$(document).ready(function(){

    $('.error , .success').hide();

    ..... 
});

我想第一个解决方案会是一个更好的方法，因为元素根本不会被查看，因为 CSS 在 JS 之前加载(假设这是您加载文件的顺序)，而在第二种方法中，元素将是在 jQuery 加载并隐藏它们之前可见。