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

我有：

在提交事件中移动了删除类。
删除了＆＃34; ready＆＃34;最后的处理程序，因为我认为没有必要。
在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

您要从hidden中的#msgSubmit容器中移除课程document.ready。只有在成功提交表单后才能启用此消息。

评论该行如下：

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

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

提交表格确认文本

2 个答案: