Question

我试过，点击，直播，提交，但我的邮件提交表单无效。这就像50％的工作时间，50％没有。这是我的代码：

Contact.html：

<div id="contact">
    <h2>Let keep in touch</h2>
    <form id="mail-form" name="contactform" action="send_form_email.php" method="post">
        <input class="contact-form" type="text" name="name" maxlength="50" placeholder="Name"><br>
        <input class="contact-form" type="text" name="mail" maxlength="80" placeholder="Email"><br>
        <textarea class="mail-content" name="content" maxlength="1000" cols="25" rows="6"></textarea><br><br>
        <center><input id="submit-button" type="submit" value="Send your message"></center>
    </form>
</div>
<div id='thankyou'>Thank you for contacting me. I'll reply as soon as possible.</div>

javascript文件：

$("#mail-form").submit(function (e) {
    e.preventDefault(); //STOP default action
    $.post("send_form_email.php", $("#mail-form").serialize(), function(data) {
        showThankYou();
    });
});

function showThankYou() {
    $contact = $("#contact");
    $thankyou = $("#thankyou");
    $contact.fadeOut(800, function() {
        $thankyou.fadeIn(800);
    });   
}

大多数时候，当我尝试提交时，浏览器被重定向到空白的send_form_email.php。当我按下后退按钮时，有时提交表单有效。另外，我将alert（）添加到submit和jquery post函数中，并且它们没有被触发。有人可以解释为什么会这样，请提前谢谢。

顺便说一句，我的网站表单网址是：http://dkonayuki.net/contact.html

所有电子邮件都已正确发送。但是浏览器（chrome）停留在空白的php页面上。

问题肯定与我的页面转换有关（使用ajax）。但我不知道如何解决它而不评论这些代码。这是我的转换代码：

$("nav").on("click", "a", function(e) {
    e.preventDefault();
    pagename = this.href.substring(this.href.lastIndexOf('/') + 1);
    // great html5 stuff, change url without reloading entire page
    history.pushState(pagename, "dkonayuki", pagename);

    $mainContent
            .fadeOut(400, function() {
                // and great ajax also
                $mainContent.hide().load(pagename + " #main > *", function() {
                    $mainContent.fadeIn(800);
                    $("nav a").removeClass("current");
                    $("nav a[href='"+ pagename +"']").addClass("current");
                });
            });
    return false;
});

Answer 1

您正在使用输入按钮提交和jquery一起提交。当您单击“提交”按钮时，您的默认提交事件就会触发。在表单标记中使用onsubmit="return false;"或在提交函数中使用e.preventDefault();以防止默认事件。

试

<form id="mail-form" onsubmit="return false;" name="contactform" action="send_form_email.php" method="post">

Answer 2

可能会因为DOM未完全加载而发生。

尝试从html中禁用该按钮：

<input id="submit-button" type="submit" value="Send your message" disabled>

将jquery事件包装在内部，以便在加载DOM时触发它们：

$(document).ready(function () { 

    //Enable submit button now
    $("#submit-button").removeAttr("disabled");

    //Attach submit handler to form
    $("#mail-form").submit(function (e) {
          e.preventDefault(); //STOP default action
          $.post("send_form_email.php", $("#mail-form").serialize(), function(data) {
             showThankYou();
          });
    });
});

Answer 3

由于您显然是从单独的文件加载javascript，因此您可能在定义表单之前包含它，这意味着它不会绑定到表单。

确保将javascript包装在

中

$(document).ready(function() {
   // Your code  
});

这样在实际加载表单html后触发绑定。

Answer 4

现在，我终于找到了我的问题。它是关于动态加载后将事件绑定到提交按钮。所以我在函数上使用了jquery：

    $("#main").on('click', "#submit-button", function (e) {...  }

因为#main总是在那里并且它没有动态加载，所以这段代码运行得很漂亮。

jQuery .submit（）没有触发

4 个答案: