Jquery |如何在提交表单成功后显示div

时间:2015-08-26 12:15:17

标签: javascript jquery html forms submit

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

这是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函数,称为&#39; #sub_form&#39;点击。

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;
    });
}

这也不是一件事。我怎么能搞清楚? 我想要做的就是点击按钮(id =&#34; sub_form&#34;),这是div的子节点(id =&#34; popWindow&#34;)提交表单,然后是div(id =表单提交成功后显示&#34; popWindow_ok&#34;)。有没有办法做到这一点? 请让我知道任何人有任何想法。谢谢。

你们知道为什么警报不能在下面的代码中工作吗?

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

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

2 个答案:

答案 0 :(得分:1)

确定。像这样修改你的功能然后它会工作。在页面加载时间绑定事件并使用 HttpClient client = new HttpClient(); try { HttpPost request = new HttpPost("example.com/api/deposit"); StringEntity params; params = new StringEntity("{" + "\"locale\": \"" + exampleclass.getLocale() + "\"," + "\"dateFormat\": \"" + exampleclass.getDateFormat() + "\"," + "\"transactionDate\": \"" + exampleclass.getTransactionDate() + "\"," + "\"transactionAmount\": \"" + exampleclass.getTransactionAmount() + "\"," + "}"); request.addHeader("Content-Type", "application/json"); request.addHeader("Accept-Language", "en-US,en;q=0.8"); request.addHeader("Authorization", "Basic somecode&&!!"); request.setEntity(params); HttpResponse response = client.execute(request); //handle the response somehow //example : System.out.println (errormessage); } catch (Exception ex) { ex.printStackTrace(); ex.getMessage(); } finally { client.getConnectionManager().shutdown(); }

提交表单
$("#modi_Game").submit();

答案 1 :(得分:0)

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

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