Textarea text does not remain, but only momentarily visible

I have a couple of test pages to save a form field’s content to localStorage, then retrieve it on another page’s form textarea field upon clicking a button. Well, clicking on the button on the second page shows the other field’s content only momentarily. Why doesn’t the content remain in the field?

This is for Safari and Chrome browsers. Will be used in iPhone coding context. Chrome does not report any errors on either page.

Below are the two HTML pages, stripped to their essentials. You would type content in the first page and hit “setItem” button. Then tap on “export” to go to page 2. On page 2 tap on the “prepare for export” button to see the content in the previous page, momentarily of course.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setItemForm1b() {
    SOneDateFrom = document.getElementById('SOneDateFrom');
    localStorage.setItem('SOneDateFrom', JSON.stringify(SOneDateFrom.value));
}

function getItemForm1b() {
        SOneDateFrom = localStorage.getItem('SOneDateFrom');
    form1b.SOneDateFrom.value = JSON.parse(SOneDateFrom);
}

function deleteStorage() {
    form1b.SOneDateFrom.value = localStorage.setItem('SOneDateFrom',"");
    if (form1b.SOneDateFrom.value === "undefined") {
        form1b.SOneDateFrom.value = "";
    }
}
</script>
</head>

<body onload="getItemForm1b()">
<form name="form1b">
<button onclick="setItemForm1b()">setItem</button>
<a href="baseExport2.html"><button>export</button></a>

<input type="text" name="SOneDateFrom" id="SOneDateFrom">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function exportForm1b() {
    var SOneDateFrom = localStorage.getItem('SOneDateFrom'); // put value into variable
    form1a.setupSOneSummary.value += "---EVENT---"; // add heading to summary textarea
   form1a.setupSOneSummary.value += "\
Date From: " + JSON.parse(SOneDateFrom);
}
</script>
</head>

<body>
<form name="form1a">
<a href="baseInput2.html"><button>return</button></a>
<button onclick="exportForm1b()">prepare to export</button>
<br>
Export:<br><textarea name="setupSOneSummary" id="setupSOneSummary" cols="20" rows="10" wrap="hard" placeholder="boo"></textarea>
</form>
</body>
</html>

The button tags are acting as form submits, resetting the form. Add this on both forms:

<form name=“form1a” onsubmit=“return false;”>

To resolve the issue.

Though the Netscape 4 style form element accesses, outdated method of hooking scripts onto elements, and invalid/malformed markup could also be contributing factors to your issues.

Personally, I’d get the buttons out of there and just use href-less anchors… you want them to look like buttons, that’s CSS’ job!