使用localStorage在一个页面上自动填充多个表单？

我试过操纵Ke Yang使用的代码，其中localStorage用于将表单字段中的文本反射到其他字段。我想做类似的事情。使用localStorage在一个页面上自动填充多个表单？

我有一个页面（可下载的库），其中包含大约10个引导生成表单。一旦填写并提交，表单就会向用户发送可下载的内容。简单的东西。但是，如果用户想要在此页面上下载多个内容，则让他们继续填写相同的表单是没有意义的。表单完全相同，字段和字段名称相同，只是不同的表单标识。

我想使用localStorage，这样一旦用户在页面上填写了一个表单，他们就可以在任何其他表单的顶部检查一个框，然后浏览器会自动填充他们的数据，然后点击提交。理想情况下，这些数据即使在离开页面后也会保存。数据提交由表单本身处理，所以不需要cookie（localStorage更好）。

这里的（minimalised）代码，我到目前为止，这下（功能（在我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">

以前输入到窗体的文本需要被存储（不清除）用户点击提交，允许他们在第一次下载后轻松下载更多内容。

感谢堆提前！

来源

2016-04-26 asherthekiwi

在表单提交检查您器isChecked应该正确的参数设置到本地存储后尝试localstorage.setItem（）]，并在窗体加载，你应该检查以查看本地存储中是否存在数据，并使用localstorage.getItem（）或使用localstorage.getItem（）设置每个输入框的值，然后将值设置为输入框 – Farzan

嗨，请参阅这里了解如何发布最小，完整且可验证的示例：http://stackoverflow.com/help/mcve –

在我看来，代码中存在太多问题

1）$(‘input[name=target]’)。这应该是$（“input [name ='target']”）。 Check此链接为更多。

2）使用setItem设置您需要使用.on委派变化

我不得不重新改写HTML，使这项工作的项目

3）。只是为了演示我以前只有三个输入字段

<!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>

来源

2016-04-26 16:01:33 brk

这太棒了，非常感谢！要将其应用于具有不同复选框的多个表单，我已将它们添加到脚本的第一行，并且它可以很好地工作。再次感谢！ $（“＃target，＃target2，＃target3”）。change（function（）{' – asherthekiwi

在应用下面的解决方案之前，请确保您已为表单提供了id，并且您的所有表单控件都将具有名称和ID，控件的名称和ID应该完全相同。

呼叫波纹管功能上寻呼呼叫波纹管功能

function onLoad(){ 
    if (loadFromLocal == true){ 
     var fromFileds = JSON.parse(localStorage["YourFormID"]) 
     for(var formfiled in fromFileds) 
     { 
      $("#"+formfiled.name).val(formfiled.value); 
     } 
    } 
}

和一件事

$('#YourFormID').serializeArray()

此函数返回的数组对象，并且每个的负载submmiting形式

function beforeSubmmit(){ 
    localStorage["YourFormID"] = JSON.stringify($('#YourFormID').serializeArray()); 
}

之前对象有两个键名称&值，名称是表单控件和值包含控件的值。

只需将此数组存储在本地存储中并在加载时检索并设置是否通过for循环，无需进行硬编码。

$("form").length

这会给你总表数

$("form")[0].id

，这会给你的形式的ID，你可以把for循环和存储所有形式的本地存储

来源

2016-04-26 15:32:28

使用localStorage在一个页面上自动填充多个表单？

回答

相关问题