Question

我正在尝试使用正在运行的消息替换表单div，但由于某种原因，它阻止了onsubmit在表单中工作，因此显示消息但表单尚未提交。

这是表格：

<div id="domsearch" class="grid_4 right" style="padding-left:20px;padding-top:30px;">
    <form action='/dac' id="dac" onsubmit="return check_domain_input()" accept-charset='utf-8'>
        <input name="domain" class="searchdom" value="www." onclick="this.value=''"/>
        <input type="submit" class="grey-big-button-submit" id="search" name="search" value="search"/>
    </form>
</div>

这是交换DIV的JS：

$("#dac").submit(function (event) {
$("#domsearch").slideUp("slow", function () {
    $(this).replaceWith(
        "<div id='loading' style='float:right;'>" +
            "<h2>Please be patient while" +
            "we check availability. <img src='/images/progress.gif'/></h2>" +
            "" +
        "</div>");
    $("#loading").delay(8000).slideUp("slow", function () {
        $(this).replaceWith(
            "<div id='results' style='float:right;'>" +
                "<h2>Almost There...</h2>" +
            "</div>");
    });
})
event.preventDefault();
});

我出错的任何想法？

**更新*在@Nicael的帮助下，我已经让它在第一个足够好的动画之后工作了，现在唯一的问题是我想添加第三条消息，以下内容应该有意义，但它只是打破了脚本：

$("#dac").submit(function (event) {
$("#domsearch").slideUp("slow", function () {
$(this).replaceWith("<div id='loading' style='float:right;'>" +
        "<h2>Please be patient while we check availability. " +
        "<img src='/images/progress.gif'/></h2>" +
        "" +
        "</div>");
$("#dac").submit(); 
$("#loading").delay(40000).slideUp("slow", function () {
$(this).replaceWith("<div id='results' style='float:right;'>" +
            "<h2>Checking All New TLDs & Preparing Results " +
            "<img src='/images/progress.gif'/></h2>" +
            "</div>");   
$("#results").delay(60000).slideUp("slow", function () {
$(this).replaceWith("<div id='delay' style='float:right;'>" +
            "<h2>Apologies for the delay " +
            "<img src='/images/progress.gif'/></h2>" +
            "</div>");  
    });
})

});

任何想法？

Answer 1

您通过添加

来阻止自动提交表单

event.preventDefault();

最后。

在这种情况下，您可以在完成所有动画后通过添加

手动提交表单

$("#dac").submit()

到第二个replaceWith()：

$("#loading").delay(8000).slideUp("slow", function () {
        $(this).replaceWith("<div id='results' style='float:right;'>" +
            "<h2>Almost There...</h2>" +
            "</div>");
        $("#dac").submit(); //<-- add it there
});

如果您想在动画之前开始提交，请将上述内容放在slideUp()的开头：

$("#domsearch").slideUp("slow", function () {
    $("#dac").submit(); //<-- place it here
    ...

Answer 2

event.preventDefault();

此行将停止表单提交，您可以在使用此行的所有效果后取消绑定：

$("form").unbind('submit').submit();

在提交不提交表格时替换Div

2 个答案: