我的“您的留言已提交!”有问题!用户单击我的表单上的提交按钮后输入文本。问题是即使没有单击任何内容,此文本也仍会显示在开头,所以当您进入我的页面时,该文本已经存在... WHat在这里错了吗?

形成:

<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";
}
?>

最佳答案

我有:


在提交事件中移动了remove类。
最后删除了“就绪”处理程序,因为我认为这是没有必要的。
在ajax调用结束时添加了一个添加类


脚本(首选):

<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>

关于javascript - 提交开头出现的表单确认文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35535957/

10-12 12:56
查看更多