How do you store more than one form on a page into local storage?

Re: How do you store more than one form on a page into local storage?

11 years ago

What do you mean you "are having a hard time"?

Error messages? Unexpected/unwanted behaviour? You haven't given enough information.

stevenhus

Re: How do you store more than one form on a page into local storage?

11 years ago

Simple: the data in the second form does not store or retrieve. Here's an example of mixing two forms, form2, form1b. form 1b does not store or retrieve data:

Save data:

var transponderNo = document.form2["transponderNo"].value;

var storageIndex = "local.storage2.transponderNo";

localStorage[storageIndex] = transponderNo;

var SOneDateFrom = document.form1b["SOneDateFrom"].value;

var storageIndex = "local.storage2.SOneDateFrom";

localStorage[storageIndex] = SOneDateFrom;

Load data:

//

setupSummariesString += "\nTransponder Numbers: ";

if (localStorage["local.storage2.transponderNo"] === undefined)

{

document.form2["transponderNo"].value = '';

}

else

{

document.form2["transponderNo"].value = localStorage["local.storage2.transponderNo"];

setupSummariesString += localStorage["local.storage2.transponderNo"];

showSummary = true;

}

//

setupSummariesString += "\nTest: ";

if (localStorage["local.storage2.SOneDateFrom"] === undefined)

{

document.form1b["SOneDateFrom"].value = '';

}

else

{

document.form1b["SOneDateFrom"].value = localStorage["local.storage2.SOneDateFrom"];

setupSummariesString += localStorage["local.storage2.SOneDateFrom"];

showSummary = true;

}

watusiware

Re: How do you store more than one form on a page into local storage?

11 years ago

Please show your index.html. You can edit stuff out for security, as long as we can see the structure.

stevenhus

Re: How do you store more than one form on a page into local storage?

11 years ago

<!DOCTYPE html>

<html>

<head>

<title>SC10 Setups</title>

<!-- <script src="js/localStorageForm1b.js" type="text/javascript"></script>

-->

// Confirm Dialog box from http://www.tizag.com/javascriptT/javascriptconfirm.php

function confirmation() {

var answer = confirm("Are you sure you want to erase ALL data you entered into the fields on this page? Action cannot be undone.")

if (answer){

clearData();

}

else{

close();

}

</script>

function confirmationSOne() {

var answer = confirm("Are you sure you want to erase ALL data you entered into the fields for Setup 1? Action cannot be undone.")

if (answer){

clearDataSOne();

}

else{

close();

}

</script>

</head>

<body>

<h1>Setups Home</h1>

</div>

<a href="#" data-role="button" data-theme="c" onclick="confirmation()">Erase</a>

</div><br>

<li data-role="list-divider">SC10 Setups List</li>

<li><a href="#setup1TOC">Setup 1</a></li>

<li><a href="#setup2TOC">Setup 2</a></li>

<li><a href="#setup3TOC">Setup 3</a></li>

<li><a href="#setup4TOC">Setup 4</a></li>

<li><a href="#setup5TOC">Setup 5</a></li>

...

<li data-role="list-divider">Setup Summaries</li>

<li>Copy text below and paste into your email client to export this page's data.</li>

</ul>

</form></div>

<h4>Page Footer</h4>

</div>

</div>

stevenhus

Re: How do you store more than one form on a page into local storage?

11 years ago

HERE IS ANOTHER FORM ON THE PAGE, "form1b":

<h1>Setup 1</h1>

</div>

</div><br>

<li data-role="list-divider">EVENT INFORMATION</li>

<li>Event Date: From<br>

</li>

<li>Event Date: To<br>

</li>

<li>Track Name<br>

<li>Location<br>

<li>Event Name<br>

<li>Notes<br>

<textarea name="SOneEventNotes"id="SOneEventNotes" cols="20" rows="4" style="background-color:white"

onkeyup="CheckFieldLength(SOneEventNotes, 'charcount-SOneEventNotes', 'remaining-SOneEventNotes', 80);" onkeydown="CheckFieldLength(SOneEventNotes, 'charcount-SOneEventNotes', 'remaining-SOneEventNotes', 80);"onmouseout="CheckFieldLength(SOneEventNotes, 'charcount-SOneEventNotes', 'remaining-SOneEventNotes', 80);"></textarea><br>

<div class="caption"><spanid="charcount-SOneEventNotes">0</span> characters entered - <spanid="remaining-SOneEventNotes">80</span> left<br></div></li>

</ul>

</form> </div>

<h4>Page Footer</h4>

</div>

</div>

watusiware

Re: How do you store more than one form on a page into local storage?

11 years ago

I don't know if this is a problem, but it's not a good idea to use raw Javascript DOM methods to access elements. Use JQuery selectors instead.

Also, you need to insure that each "page" has a truly unique identifier. This is probably true in your case, but you do need to be careful with, say "edit" screens, where you may have multiple copies of the page loaded in the DOM. i.e. if you are editing a Thing, don't make the id "thing". Make it, say, "thing-1", where 1 is your database ID of the specific thing.

JQuery selector:

$('div#home form[name=form2]')

will select your first form, for example.

Use a similar approach to select elements within a form.

"JQuery Pocket Reference" has a great, exhaustive tutorial and reference on JQuery selectors.

As well, to access form values, use JQuery, not raw underlying Javascript DOM methods.

my_value =
$('div#home form[name=form2] text[name=transponderNo]').val()

stevenhus

Re: How do you store more than one form on a page into local storage?

11 years ago

Thank you for responding, but the reply is too general. It still doesn't tell me what to do differently. For instance, the code in my second post: Is it wrong in the context of the index.html page I posted? Should it be different?

watusiware

Re: How do you store more than one form on a page into local storage?

11 years ago

I don't know if it HAS to be different. I would experiment. But this isn't the "normal" way of going about this in JQ/JQM.

If you're coding using DOM methods, you're missing a major point of JQ/JQM - to use a universal API that hides the differences between browsers.

Try changing, for example:

var SOneDateFrom = document.form1b["SOneDateFrom"].value;

to:

var SOneDateFrom =
$('div#home form[name=form2] text[name=transponderNo]').val();

The easiest way to try-out things in JQ/JQM is to use a Javascript console, and type-in expressions and see if you get what you expect.

stevenhus

Re: Re: How do you store more than one form on a page into local storage?

11 years ago

I am not proficient in JS so that won't work for me. I wouldn't know what to do differently. I used the above code from another source, then adapted it to fit my needs. It works on the first page/first form, but I'm stuck on the second form.

Oh well. Thanks for responding. I haven't gotten any other responses over the last 2-3 weeks on this topic over several different forums, though I've tried wording it in different ways.

Response title

Attachments

jQuery Forum