Question

我尝试过操作Ke Yang使用的代码，其中使用localStorage将表单字段中的文本镜像到其他字段。我想做类似的事情。

我有一个页面（可下载的库），其中包含大约10个潜在客户生成表单。填写完并提交后，表单会向用户发送可下载的内容。简单的东西。但是说用户想要在这个页面上下载不止一件东西，让他们继续填写相同的表格是没有意义的。表单完全相同，相同的字段和字段名称，只是不同的表单ID。

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

这是我到目前为止的（最小化）代码，它位于我的scripts.js文件中的（function（$）{）下：

$( ‘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">

用户点击提交后，

提前感谢大家！

Answer 1

在应用以下解决方案之前，请确保您已为表单指定了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()

此函数返回数组对象，每个对象都有两个键名称＆amp; value，name是表单控件的名称，value包含控件的值。

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

$("form").length

这将为您提供总表格数

$("form")[0].id

这将为您提供表单ID，您可以将循环并存储在本地存储中

Answer 2

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

1）$( ‘input[name=target]’ )。这应该是$（＆＃34;输入[name =＆＃39; target＆＃39;]＆＃34;）。Check此链接了解更多信息。

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>

使用localStorage在一个页面上自动完成多个表单？

2 个答案: