使用localStorage在一个页面上自动完成多个表单？
[英]Use localStorage to autocomplete multiple forms on one page?
问题描述
我尝试过操作Ke Yang使用的代码，其中使用localStorage将表单字段中的文本镜像到其他字段。 我想做类似的事情。
我有一个页面（可下载的库），其中包含大约10个潜在客户生成表单。 填写完并提交后，表单会向用户发送可下载的内容。 简单的东西。 但是说用户想在这个页面上下载不止一件东西，让他们继续填写相同的表格是没有意义的。 表单完全相同，相同的字段和字段名称，只是不同的表单ID。
我想使用localStorage，这样一旦用户在页面上填写了一个表单，他们就可以检查任何其他表单顶部的框，浏览器会自动填充他们的数据，然后点击提交。 理想情况下，即使这些数据离开页面也会保存。 数据提交由表单本身处理，因此不需要cookie（而localStorage更好）。
这是我到目前为止的（最小化）代码，它位于（function（$）{在我的scripts.js文件中：
$( ‘input[name=target]’ ).click(function() {if($(‘input[name=target]’).is(‘:checked’)) {
if (localStorage[“first-name”]) {
$(‘input[name=first-name]’).val(localStorage[“first-name”]);
}
if (localStorage[“last-name”]) {
$(‘input[name=last-name]’).val(localStorage[“last-name”]);
}
if (localStorage[“your-email”]) {
$(‘input[name=your-email]’).val(localStorage[“your-email”]);
}
}
});$(‘.wpcf7-text’).change(function () {
localStorage[$(this).attr(‘name’)] = $(this).val();
});
在上方，您可以看到一个表单中不同字段的名称。 HTML看起来像这样，需要勾选复选框以调用存储的表单数据：
<p><input id="target2" name="target2" type="checkbox" value="Downloaded our stuff before?" /> Downloaded our stuff before?</p>
<input type = "text" name ="first-name" class="wpcf7-text">
<input type = "text" name ="last-name" class="wpcf7-text">
<input type = "text" name ="your-email" class="wpcf7-text">
在用户点击提交后，之前输入表单的文本需要存储（不清除），允许他们在首次下载后轻松下载更多内容。
谢谢你提前！
2 个解决方案
解决方案1
0 2016-04-26 15:32:28
在应用以下解决方案之前，请确保您已为表单指定了id，并且所有表单控件都将具有名称和ID，控件的名称和ID应相同。
在提交表单之前调用波纹管功能
function beforeSubmmit(){
localStorage["YourFormID"] = JSON.stringify($('#YourFormID').serializeArray());
}
在页面调用波纹管功能的负载
function onLoad(){
if (loadFromLocal == true){
var fromFileds = JSON.parse(localStorage["YourFormID"])
for(var formfiled in fromFileds)
{
$("#"+formfiled.name).val(formfiled.value);
}
}
}
还有一件事
$('#YourFormID').serializeArray()
此函数返回数组对象，每个对象具有两个键名称和值，name是表单控件的名称，value包含控件的值。
只需将此数组存储在本地存储中并在加载时检索并设置是否通过for循环，无需进行硬编码。
$("form").length
这将为您提供总表格数
$("form")[0].id
这将为您提供表单ID，您可以将所有表单放在循环中并将其存储在本地存储中
解决方案2
0 已采纳 2016-04-26 16:01:33
在我看来，您的代码中存在太多问题
1） $( 'input[name=target]' ) 。 这应该是$（“input [name ='target']”）。 查看此链接了解更多信息。
2）使用setItem设置项目
3）您需要使用.on来委派更改
我必须重写html才能完成这项工作。 仅用于演示我只使用了三个输入字段
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" crossorigin="anonymous"></script>
</head>
<body>
<p><input id="target" name="target" type="checkbox" value="Downloaded our stuff before?" /> Downloaded our stuff before?</p>
<input type = "text" name ="first-name" class="wpcf7-text">
<input type = "text" name ="last-name" class="wpcf7-text">
<input type = "text" name ="your-email" class="wpcf7-text">
<script>
$("#target").change(function(){
if($(this).is(":checked")) {
if (localStorage['first-name']) {
$("input[name='first-name']").val(localStorage['first-name']);
}
if (localStorage['last-name']) {
$("input[name='last-name']").val(localStorage['last-name']);
}
if (localStorage['your-email']) {
$("input[name='your-email']").val(localStorage['your-email']);
}
}
});
$(".wpcf7-text").on("change",function () {
localStorage.setItem($(this).attr("name") , $(this).val());
});
</script>
</body>
</html>
一页中有多个jQuery自动完成功能
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.