提交表单确认文本出现在开头

Question

我的“您的消息已提交！”有问题用户单击表单上的提交按钮后的文本。问题是即使没有点击任何内容，该文本也会出现在开头，所以当您进入我的页面时，该文本已经存在......这里有什么问题？

表格：

<form role="form" id="contactForm">
     <div class="row">
            <div class="form-group">
                 <input type="text" class="form-control" name="name" id="name" placeholder="Wpisz swoje imię, nazwisko" required="required">
            </div>
            <div class="form-group">
                <input type="email" class="form-control" name="email" id="email" placeholder="Enter email" required>
            </div>

        <div class="form-group">
            <textarea id="message" name="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
        </div>
        <button type="submit" id="form-submit" class="btn-block">Wyślij wiadomość</button>
 <div id="msgSubmit" class="h3 text-center hidden">Your message has been submitted!</div>
     </div>
    </form>

JS：

<script>
$(document).ready(function() {
    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            submitForm();
        }
    });

    $("#msgSubmit").removeClass("hidden");
});

function submitForm() {
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $("#contactForm").serialize(),
        success: function(text) {
             if (text == "success"){
                formSuccess();
            }
        },
        error : function() {
        }
    });
}

$(document).ready(function formSuccess() {
    $("#msgSubmit" ).removeClass( "hidden" );
});

</script>

PHP：

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$EmailTo = "unknown@unknwon.com.pl";
$Subject = $name;

$message .= "\n\n" . 'From: '. $email;
$success = mail($EmailTo, $Subject, $message);

// redirect to success page
if ($success){
   echo "success";
}else{
    echo "invalid";
}
?>

Answer 1

我有：

1. 在提交事件中移动了移除类。

2. 最后删除了“就绪”处理程序，因为我认为没有必要。

3. 在 ajax 调用结束时添加了一个 add 类

脚本（第一个选项）：

<script>
$(document).ready(function() {
    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            $("#msgSubmit").removeClass("hidden");
            submitForm();
        }
    });

});

function submitForm() {
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $("#contactForm").serialize(),
        success: function(text) {
            $("#msgSubmit" ).addClass( "hidden" );
        },
        error : function() {
                $("#msgSubmit" ).addClass( "hidden" );
        }
    });
}

</script>

第二个选项（如果成功则只在最后发送消息）：

<script>
$(document).ready(function() {
    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            submitForm();
        }
    });

});

function submitForm() {
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $("#contactForm").serialize(),
        success: function(text) {
            if (text == "success") {
                $("#msgSubmit" ).removeClass( "hidden" );
                setTimeout(function() {
                    $("#msgSubmit" ).addClass( "hidden");    
                }, 3000);
            }
        },
        error : function() {
            /* You probably want to add an error message as well */
            $("#msgError" ).removeClass( "hidden" );
        }
    });
}

</script>

Answer 2

您正在从document.ready 中的#msgSubmit 容器中删除类hidden。只有在表单提交成功后，您才应该启用此消息。

注释如下：

$(document).ready(function() {
    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            submitForm();
        }
    });

    //$("#msgSubmit").removeClass("hidden"); // comment this line
});