SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,315
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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.

    HTML Code:
    <!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>
    HTML Code:
    <!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 += "\nDate 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>

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •