如何在JQuery对话框中单击按钮提交主窗体

时间:2011-01-17 06:36:53

标签: jquery

我正在使用JQuery提交表单。

我有以下HTML:

<body>
    <div id="wrapper">
        <form id="aspnetForm" action="index_2011.aspx" method="post">
            <div action="#" class="homeWidget">
                <fieldset>       
                    <div class="row">
                        <label class="first" for="olciLastName">
                            Last name</label>
                        <input class="input" id="olciLastName" value="" type="text">
                        <div class="clearBoth">
                        </div>
                    </div>
                    <div class="row">
                        <label class="first" for="olciItinerary">
                            Itinerary number</label>
                        <input class="input itineraryNumber" id="olciItinerary" value="" type="text">
                        <a href="#" class="ico-help">help</a>
                        <div class="clearBoth">
                        </div>
                    </div>
                    <div class="row submit">
                        <span class="form-btn">
                            <input class="submitButton" value="Retrieve Booking" type="button"></span>
                        <div class="clearBoth">
                        </div>
                    </div>
                </fieldset>
            </div>      
            <!-- SKYWARDS LOGIN -->
            <div style="display: none;" id="skywardsLogin">
                <div class="formContainer" id="loginDetails">
                    <table cellspacing="0" cellpadding="0" border="0">
                        <tbody><tr>
                            <td colspan="2" class="formLabel">
                                <span style="color: Red;" class="validateTips"></span>
                            </td>
                        </tr>
                        <tr>
                            <td width="100" class="formLabel">
                                <label>Skywards Number</label>
                            </td>           
                        </tr>
                        <tr>
                            <td class="formLabel">
                                <label>Password</label>
                            </td>
                            <td>
                                <input type="password" class="formField" id="password" maxlength="25" name="password">
                            </td>               
                        </tr>
                        <tr>
                            <td class="formLabel">
                                <label>Remember Me</label>
                            </td>               
                        </tr>
                    </tbody></table>
                </div>
                    <div class="continueBarRightButton">
                        <input type="image" title="Log In" alt="Log In" id="loginButton" name="loginButton" src="/english/images/button_log_in_tcm233-224930.gif">
                        <div style="display: none;" id="ajaxloading">
                            <img align="absmiddle" alt="Processing..." src="/english/images/spinner.gif">
                             Processing...
                        </div>
                    </div>
            </div>  
        </form>     
    </div>  
</body>

如果你看到上面的HTML,我有ID skywardsLogin ,这将作为JQuery模态对话,就像我知道并看到当JQuery .Dialog 功能被称为 FORM 标签中取出所有相关的HTML ,我的问题是我想提交点击登录按钮的形式( “loginButton”),我知道如何提交FORM,但问题是我在提交时没有得到完整的FORM元素值,下面是我用来提交表单的Jquery示例代码

$("#aspnetForm").attr("action", "http://localhost:8080/english/index_2011.aspx");
$("#aspnetForm").submit();

我已经使用序列化进行了检查,但没有获得任何表单值

 var str = $('#aspnetForm').serialize();   
        // -- Start AJAX Call --
 alert(str);

ALERT 上方未在表单中显示任何输入的值。 请提出建议!

1 个答案:

答案 0 :(得分:0)

在元素上调用jquery .dialog()会删除表单外部的所有内容。初始化对话框后需要将其放回原处。你可以在同一个链中做到这一点:

$("skywardslogin").dialog({....}).appendTo("form:first");