jQuery |成功提交表单后如何显示div答案

【问题标题】：Jquery | How to show div after submit form successfullyjQuery |成功提交表单后如何显示div
【发布时间】：2015-08-26 12:15:17
【问题描述】：

我制作了两个弹出窗口。一种是询问是否提交表单，如果用户单击“是”，则提交表单。我遇到的一件事是在成功提交表单后显示另一个（弹出窗口）。这只是宣布弹出窗口。

这是html中的弹出窗口。

<!-- modalpopup:start (1)-->
<div style="display:none;" id="popWindow" class="popWindow">
<span class="modalWindow"></span>
<div class="popLayer">
    <button type="button" class="xclose" onclick="document.getElementById('popWindow').style.display='none'"><img src="images/x_btn.png" title="닫기" /></button>
    <div class="modalpopup_top"><img class="left_logo" src="images/left_logo.png" title="GAMEPARTYdevelopers_logo" /></div>
    <div class="modalpopup_contants">
        <p></p>
        <div class="buttonbox"><button onclick="document.getElementById('popWindow').style.display='none'" class="button100">취소</button><button id="sub_form" val    ue="확인" onclick="sub_form();" class="button100_01">확인</button></div>
    </div>
</div>

<!-- modalpopup:start (2) -->
<div style="display:none;" id="popWindow_ok" class="popWindow">
<span class="modalWindow"></span>
<div class="popLayer">
    <button type="button" class="xclose" onclick="document.getElementById('popWindow_ok').style.display='none'"><img src="images/x_btn.png" title="닫기" /></button    >
    <div class="modalpopup_top"><img class="left_logo" src="images/left_logo.png" title="GAMEPARTYdevelopers_logo" /></div>
    <div class="modalpopup_contants">
        <p></p>
        <div class="buttonbox"><button id="refresh_form" value="확인" onclick="document.getElementById('popWindow_ok').style.display='none'" class="button100_01">>    확인</button></div>
    </div>
</div>

这是sub_form函数，被称为'#sub_form'被点击。

function sub_form() {
    document.getElementById('popWindow').style.display='none';  

    modi_Game.action = "modify_games.html";
    modi_Game.submit(function(event) {
        event.preventDefault();
        document.getElementById('popWindow_ok').style.display='block';
    }
}

上面的那个没用，所以我改如下。

var modi_Game = document.modi_game;
function sub_form() {
document.getElementById('popWindow').style.display='none';

modi_Game.submit(function(event) {
    event.preventDefault();
    $.ajax({ 
            data: $("#modi_game").serialize(), 
            type: $(this).attr('POST'), 
            url: $(this).attr('modify_games.html'), 
            success: function(response) { 
                document.getElementById('popWindow_ok').style.display='block';
            }
    });
    return false;
    });
}

这也不行。我怎么能弄明白？我要做的就是单击作为 div (id="popWindow") 的子项的按钮 (id="sub_form") 提交表单，然后在表单完成后显示 div (id="popWindow_ok")提交成功。有没有办法做到这一点？请让我知道任何人有任何想法。谢谢你。

你们知道为什么警报在下面的代码中不起作用吗？

function sub_form() {
    document.getElementById('popWindow').style.display='none';

    modi_Game.action = "modify_games.html";
    modi_Game.submit(function() {
        alert("ok");
    });
}

【问题讨论】：

标签： javascript jquery html forms submit

【解决方案1】：

好的。像这样修改您的功能，然后它将起作用。在页面加载时间绑定事件并使用$("#modi_Game").submit();提交表单

function sub_form() {
            document.getElementById('popWindow').style.display = 'none';

            var modi_Game = document.getElementById("modi_Game");

            modi_Game.action = "yourlink.html";

            $("#modi_Game").submit();

        }

        $(document).ready(function () {
            $("#modi_Game").submit(function (event) {
                alert("Stoping the form submitting");
                event.preventDefault();
                document.getElementById('popWindow_ok').style.display = 'block';
            });

        });

【讨论】：

是的，它是表格。我试过了，但是表单只是在没有警报的情况下提交。

【解决方案2】：

另一种解决方案可能是

function sub_form() {
    document.getElementById('popWindow').style.display='none';

    modi_Game.action = "modify_games.html";

    $("#modi_Game").submit(function (event) {
                alert();
                event.preventDefault();
                document.getElementById('popWindow_ok').style.display = 'block';
            });

    $("#modi_Game").submit();
}

【讨论】：

【解决方案3】：

将此添加到您的成功回调中：

$('#popWindow_ok').show();

【讨论】：