如何在删除视图时清除dom表单数据，以后将重用

我遇到了来自先前视图的表单数据存在的问题，然后再次调用视图时持久性数据混淆了用户的信息试图发送。例如在应用程序加载时，我有一个登录视图。当用户提交用户名和密码时，我从父级删除视图，并加载主应用程序。当用户注销时，我清除我的模型并重建登录视图。当用户点击提交按钮（无表单）时，dom显示2组用户登录数据。有没有人有关于如何用jquery从dom中清除表单数据的建议？如何在删除视图时清除dom表单数据，以后将重用

我使用jquery bootstraps，并使用brite.js作为我的mvc框架。

这里是我的登录表单

<div id="loginForm" data-b-view="Login" data-brite-cid="bview_37"> 
    <div class="border shadow rounded text-center" style="margin: 0 auto !important;width:750px;"> 
     <div class="holder lText"> 
     <h2>Welcome to dmEDGE5!</h2> 
     <div class="span7">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div> 
     <div class="span7"> 
      <div class="row"> 
      <span>Username: </span> 
      <input id="loginUser" type="text"> 
      </div> 
      <div class="row"> 
      <span>Password: </span> 
      <input id="loginPass" type="password"> 
      </div> 
      <div class="row"> 
      <span>Remember me on this computer </span> 
      <input id="loginRemember" type="checkbox" checked="checked"> 
      </div> 
      <div class="row"> 
      <button id="loginSubmitBtn" class="btn btn-primary pull-right">Login!</button> 
      </div> 
      <p class="cText"><span id="forgotPass" class="link">Forgot Password</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="createAcct" class="link">Create Account</span></p> 
     </div> 
     <div class="clearfix">&nbsp;</div> 
     </div> 
    </div> 
    <div class="clearfix">&nbsp;</div>  
    </div>

现在这里是我的jQuery监听并导致功能

$('#loginSubmitBtn').click(function() { 
var user = $('#loginUser').val(); 
var pass = $('#loginPass').val(); 
if ($('#loginRemember').is(":checked")){ 
    localStorage.Username = user; 
}else{ 
    localStorage.Username = ''; 
} 
loginUser(user, pass) 
}); 

function loginUser(user, pass){ 
    if (user.length > 1 || pass.length > 1){ 
    location.hash = '#/authenticateUser'; 
    authUser(user, pass); 
    } else { 
     alert('Your username or password is incorrect please try again.'); 
     location.hash = '#/login'; 
    } 
} 

function authUser(user, pass){ 
    var url = modelLocator.httpServiceRoot + 'j_spring_security_check'; 
    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: { 
     j_username : user, 
     j_password : pass 
     }, 
     success: function(data, textStatus, jqXHR){ 
     loginSuccess(data, textStatus, jqXHR)}, 
     error: function(jqXHR, textStatus, errorThrown){ 
     loginError(jqXHR, textStatus, errorThrown)}, 
     timeout: function(){ loginTimeout() }, 
     scriptCharset: 'UTF-8', 
     dataType: 'xml' 
    }); 
}

此外，如果用户不正确登录的，然后正确地登录，将登录两次。首先使用错误凭证，然后使用正确的凭证。

所以底线是如何清除用户点击按钮后的信息。使用$（'＃loginForm input'）。val（''）;另外使用$（'＃loginForm input'）。如果我这样做jquery提交''，即使用户输入数据也不起作用。

建议使用一组表单标签来利用.reset（），但是我们看到这会导致IE中的错误，因为单击此按钮会导致页面重新加载并影响hashchange。在firefox和铬我看到数据双提交。有一个点击监听器，所以不知道为什么它会双击。另外正如我所提到的，我们正在使用mvc框架与句柄和引导程序一起基于来自服务器的数据动态构建页面。因此，网页渲染的流

应用加载了
基于对我们使用MVC调用视图控制器（在这种情况下登录视图）
控制器使URL散列所有数据调用并将数据推入模型中。然后发送一个渲染请求到mvc和handlebars。
把手遍历模板并返回完成的HTML
视图是由对用户可见

我所看到的正好是你第一次登录的罚款。那么当您注销并重新登录时，会使所有呼叫进行两次。那么如果您再次注销并且第三次登录将所有呼叫三次。（'divID input'）。val（''）和$（'divID input'）.val（null）但是当用户输入一个值时，它显示为''或null。

请让我知道如果您有任何建议

杰夫

来源

2013-08-06 jeff werner

尝试：$('#loginForm').reset()，但你需要使用一个实际的形式，而不是一个DIV。

来源

2013-08-06 20:18:31

将id'd div更改为表单会导致浏览器间的性能问题。IE自己重新加载屏幕。我使用哈希更改来更改视图并单击IE上的表单中的按钮使页面重新加载。同样在FF和Chrome中，当初次提交时更改为表单时，我将获得双重提交。我不确定这是由brite还是处理页面如何渲染引起的。还有其他建议吗？ –

使用表单标签时，请您解释这些性能问题吗？ –

更新了问题以更好地反映正在发生的事情 –

如何在删除视图时清除dom表单数据，以后将重用

回答

相关问题