一次提交后Jquery Form消失

Question

我的页面上的表单在提交每个表单后消失。例如，显示登录提示（使用Jquery Mobile）输入用户名和密码，对话框正常显示，输入被处理和验证，登录成功后显示主页。但是，如果我注销然后尝试重新登录，则只会显示页眉。输入字段和标签不存在。

我有另一个页面，其中有一个输入字段，在其中输入文本，进行 $.post 调用，返回 HTML 并使用 $('#results') 使用结果更新元素。 html(dataReceived) 函数调用。

显示结果时，表单似乎消失了。这是页面文本：

<div data-role="page" id="Search" data-title="Search">
<div data-role="header" data-theme="e">
<h1>Search</h1>                
</div>
<div data-role="content">                
<form name="SearchForm" action="search.php">
SSN: <input type=number name="snum" size="9" value=""><br>
<input id="SearchButton" type="submit" value="Begin Search" data-inline="true">
</form>
<div id=SearchResults></div>
</div><!-- /content -->
</div><!-- /Search -->

我拦截表单的提交事件并在其他地方处理它。 $.post AJAX调用的回调函数中设置div内容的代码为：

$('#SearchResults').html(dataReceived);

一般信息：jquery 和 jquery mobile 的最新稳定版本。这是一个多页文件。不调用外部页面。一切都通过 $.post 调用完成。登录表单不会更新任何 HTML，它只是接收用户的 ID 并将其存储在变量中。

任何帮助将不胜感激。 Google 在这方面不是我的朋友。

修改为显示表单提交代码：

$(document).ready(function() {
        $('form').submit(function(event) {
                event.preventDefault();
                var thisForm=$(this);
                var formUrl=thisForm.attr('action');
                var formName=thisForm.attr('name');
                var dataToSend=thisForm.serialize();
                var callBack=function(dataReceived) {
                        thisForm.hide();
                        switch(formName) {
                            case 'loginForm':
                            if (dataReceived.length>0 && parseInt(dataReceived)>0) {
                                   loggingIn=0;
                                   userId=parseInt(dataReceived);
                                   $.mobile.changePage("#home");
                                   break;
                            }
                            thisForm.show();
                            break;

                            case 'SearchForm':
                                    $('#SearchResults').html(dataReceived);
                                    break;
                        }
                };
                dataToSend += '&seid=' + SESSID;
                var rtnType="html";
                switch(formName) {
                        case "loginForm":
                                rtnType="text";
                                break;
                        case 'SearchForm':
                                break;
                }
                $.post(formUrl,dataToSend,callBack,rtnType);
                return false;
        });

Answer 1

您将表单隐藏在提交回调函数中：

thisForm.hide();

对于“loginForm”，您调用的是 show()，但对于“SearchForm”，您没有在表单上调用 show()：

            var callBack=function(dataReceived) {
                    thisForm.hide();
                    switch(formName) {
                        case 'loginForm':
                          if (dataReceived.length>0 && parseInt(dataReceived)>0) {
                               loggingIn=0;
                               userId=parseInt(dataReceived);
                               $.mobile.changePage("#home");
                               break;
                          }
                          thisForm.show();
                          break;
                        case 'SearchForm':
                          $('#SearchResults').html(dataReceived);
                          break;
                    }
            };