本地存储表单以将最后一个当前表单设置为新的当前表单
Locally storing form to set last current form to the new current form
我知道标题听起来很难理解(奇怪),但这是它的解释:
假设我的页面上有 2 个表单。单击按钮会隐藏当前窗体,然后显示另一个窗体。我刷新页面。现在,我希望刷新当前表单之前的表单也是刷新后的当前表单。我知道这可以通过使用localStorage
来完成,但我不知道如何完成。:P
代码 (HTML):
<div class="span5">
<!-- Row's 2nd Column holding the sign-in/sign-up form -->
<form action="login.php" method="post" class="form-signin" id="login_frm">
<h2 class="form-signin-heading">Login</h2>
<input class="input-xlarge" type="text" placeholder="Username" name="username" />
<input class="input-xlarge" type="password" placeholder="Password" name="password" />
<br/>
<input type="submit" name="submit_login" value="Login" class="btn btn-primary" />
</form>
<form action="login.php" method="post" class="form-signin hide" id="register_frm">
<h2 class="form-signin-heading">Register</h2>
<input class="input-xlarge" type="text" placeholder="Username" name="username" />
<input class="input-xlarge" type="password" placeholder="Password" name="password" />
<input class="input-xlarge" type="password" placeholder="Confirm Password" name="confirm_password" />
<br/>
<input type="submit" name="submit_register" value="Register" class="btn btn-primary" />
</form>
</div>
CSS:使用引导:)
.JS:
var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(document).ready(function () {
$("#register_button").on('click', function (e) {
e.preventDefault();
i++;
if (i % 2 === 0) {
$("#register_frm").fadeToggle('fast', function () {
$("#login_frm").fadeToggle('fast');
});
$(this).text('Register');
} else {
$("#login_frm").fadeToggle('fast', function () {
$("#register_frm").fadeToggle('fast');
});
$(this).text('Login');
}
});
});
好吧,这里应该是一个可行的解决方案。我已经用注释标记了新代码。
var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(document).ready(function () {
$("#register_button").on('click', function (e) {
e.preventDefault();
i++;
if (i % 2 === 0) {
$("#register_frm").fadeToggle('fast', function () {
$("#login_frm").fadeToggle('fast');
});
$(this).text('Register');
localStorage.setItem("form", "login"); // < NEW CODE
} else {
$("#login_frm").fadeToggle('fast', function () {
$("#register_frm").fadeToggle('fast');
});
$(this).text('Login');
localStorage.setItem("form", "register"); // < NEW CODE
}
});
// v NEW CODE v
if (localStorage.getItem("form") == "register") {
$("#register_button").click();
}
// ^ NEW CODE ^
});
这是一个解决方案,尽管由于操作方法导致页面刷新,它不能很好地用作jsFiddle。 不需要本地存储(传统意义上),这两个变量可以只是窗口本身的几个数据属性。
$(document).ready(function () {
var registerBtn = $("#register_button");
var rform = $('#register_frm');
var lform = $('#login_frm');
lform.show();
rform.hide();
var i = 0;
$("#register_button").on('click', function (e) {
e.preventDefault();
i++;
if (i % 2 === 0) {
rform.find('input[name = "username"]').val(window.data('username'));
rform.find('input[name = "password"]').val(window.data('password'));
$("#register_frm").fadeOut('fast', function () {
$("#login_frm").fadeIn('fast');
});
$(this).text('Register');
} else {
window.data('username', val('rform.find(input[name = "username"]'));
window.data('password', val('rform.find(input[name = "password"]'));
$("#login_frm").fadeOut('fast', function () {
$("#register_frm").fadeIn('fast');
});
$(this).text('Login');
}
});
});
相关文章:
- 通过JavaScript设置表单目标
- 当按下链接以在不同页面上的表单中的下拉列表中设置值时
- 在提交时设置表单隐藏值
- 无法获取表单's面板的x和y坐标,并在加载时从cookie中设置它们
- 如何设置Dojo表单中的selected选项
- 如何从javascript中设置html表单的属性
- 如何在表单提交时在谷歌分析上设置事件跟踪
- 在表单提交时设置JSON格式
- Dojo表单.选择未正确设置值
- Extjs 3.3动态地将字段添加到表单中,并设置它们的标签宽度
- 需要使用条纹(更多)重力表单插件将默认付款表单设置为“存档卡”
- 如何在支柱中使用操作表单设置文本框值
- 本地存储表单以将最后一个当前表单设置为新的当前表单
- 将表单设置为只允许.edu电子邮件地址
- 如何在javascript中为放置在引导模式中的表单设置密码和用户名
- 如何根据对上一个表单的选择,将选择表单设置为选项
- 如何为Angular.js表单设置默认值和可变值
- 如何在不用户单击提交的情况下从表单设置JavaScript变量?
- Ajax表单设置文本框值onsubmit
- 将表单设置为$pure,但保持当前值