asherthekiwi asherthekiwi - 7 months ago 34
HTML Question

Use localStorage to autocomplete multiple forms on one page?

I have tried manipulating the code used by Ke Yang where localStorage is used to mirror text in form fields across to other fields. I want to do something similar.

I have one page (a library of downloadables) which contains about 10 lead-generation forms on it. Once filled out and submitted, the form sends the user the downloadable. Simple stuff. But say the user wants to download more than one thing on this page, it doesn't make sense to have them keep filling out the same forms. The forms are exactly the same, same fields and field-names, just different form IDs.

I want to use localStorage so that once a user has filled out one form on the page, they can check a box at the top of any of the other forms and the browser will autofill their data, then they hit submit. Ideally, this data is saved even after they leave the page. Data submission is handled by the form itself, so there's no need for cookies (and localStorage is better).

Here's the (minimalised) code I have so far, which goes under the (function($) { in my scripts.js file:

$( ‘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();
});


Above you see the names of the different fields within one form. The HTML looks like this, where the checkbox would need to be ticked to call the stored form data:

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


The text previously entered into a form will need to be stored (not cleared) after a user hits submit, allowing them to download more stuff easily after their first download.

Thanks heaps in advance!

Answer

It seems to me that there are too many issues in your code

1) $( ‘input[name=target]’ ) . This should be $("input[name='target']") .Check this link for more.

2) Use setItem to set the items

3) You need to use .on to delegate the change

I have to rewrite the html to make this work. Just for demo I used only three input field

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