SitePoint Sponsor

User Tag List

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

    [code review] Need to change to eliminate string from second field

    With this code, a user enters values into various text fields and taps Save to save it to local storage (a persistent kind of HTML web page memory). Tapping Load will load the values back into the fields AND load the values of all the fields into a second textarea field as a summary for export.

    I am using the following working code to do two things:
    1. If a value HAS NOT been entered into the STwoDateFrom field in form2a, and the user taps Load, the field would correctly return "undefined" in the field. The if statement says to return a blank field instead. It works. The code also will also enter the field's caption on a new line in the second field called setupSTwoSummary in form2a.
    2. But if a value HAS been entered into the STwoDateFrom field, the the else statement says to load the value into the original STwoDateFrom field AND enter the field's caption and value in the second field. This works.

    Code JavaScript:
    function loadDataS2()
    { "use strict";
     
    var setup2SummariesString = ''; // default is no text added to the second field
    var show2Summary = false; // default is don't show the field's value in the second field
     
    setup2SummariesString += "--EVENT--\n  Date From: "; // concatenate this to a new line in the second field. "Date From" is the field caption.
        if (localStorage["local.storage22.STwoDateFrom"] === undefined) // if no value has been entered in the first field ...
        {
            document.form2b["STwoDateFrom"].value = ''; // ... then that field should show nothing, not even "undefined"
        }
        else
        {
            document.form2b["STwoDateFrom"].value = localStorage["local.storage22.STwoDateFrom"]; // load the value back into the first field
            setup2SummariesString += localStorage["local.storage22.STwoDateFrom"]; // also concaenate the value to the second field
            show2Summary = true;
        }
     
    // write to field	
        if (show2Summary === true)
        {
            document.form2a["setupSTwoSummary"].value = setup2SummariesString; // write out concatenated string
        }
        else
        {
            document.form2a["setupSTwoSummary"].value = 'No content to display. Enter content in the fields for this setup and tap Save.'; // if no values in any of the fields, write this
        }
    }

    Now I want to adjust the code so that if no value is entered into the first field, I don't want anything added to the second field either. I tried the following change, but it still shows the new line and the field's name in the second field if the first field has no value entered. I don't know what else to try.

    Code JavaScript:
    setup2SummariesString += "--EVENT--";
        if (localStorage["local.storage22.STwoDateFrom"] === undefined)
        {
            document.form2b["STwoDateFrom"].value = '';
        }
        else
        {
            document.form2b["STwoDateFrom"].value = localStorage["local.storage22.STwoDateFrom"];
            setup2SummariesString += "\n  Date From: ";
            setup2SummariesString += localStorage["local.storage22.STwoDateFrom"];
            show2Summary = true;
        }

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,332
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    Since the contents of setupSTwoSummary is filled with the contents of the variable "setup2SummariesString" (when the variable "show2Summary" is true), if I understand your question correctly you could simply remove the line
    [code=javascript]
    show2Summary = true;
    [/code]
    in the 'else' clause of the first 'if' shown here.

    If I misunderstood your dilemma, please try to restate the problem. Maybe draw a little sketch of the flow.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If "true" was removed as you state, then the string would not show at all in the second field if the user had entered a value in the field.

    It looks like I need to explain this another way. I just about gave up typing this the first time, fearing it was too complicated to explain. I'll try to make a diagram. I thought the // comments were more helpful.

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I hope this step-by-step guide explains what is happening:

    1. User enters value of "12/27/2011" in the Date From field called STwoDateFrom and does not enter value into the Date To field called STwoDateTo.
    2. User taps Save and values are saved to web memory.
    3. User taps Load and the values are loaded back into STwoDateFrom and STwoDateTo and also into new lines in setupSTwoSummary as:

    --EVENT--
    Date From: 12/27/2011
    Date To:

    This is what is happening now with the first code. What I really want to happen is:

    --EVENT--
    Date From: 12/27/2011

    ... with Date To: not appearing at all. How do I change the code to effect this? The best, most logical way to me is the second code change, but it doesn't work!

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I commented out the show2Summary = true; and it did not do anything to the result. The result was displayed as normal. Hmmm...

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    I can't see any reference to the 'Date To' in the code you have posted. Is there additional code for handling that field? If so then it would help to be able to see that code in order to work out what is happening.

    Perhaps a link to the page where you are running the code would help.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The HTML goes like this, using Jquery:

    HTML Code:
                        <ul data-role="listview" data-dividertheme="b">                        
                            <li data-role="list-divider">EVENT INFORMATION</li>
                            <li>Event Date: From<br>
                                <input type="text" name="STwoDateFrom" id="STwoDateFrom" class="singleline" data-role="none" placeholder="MM/DD/YYYY or DD/MM/YYYY" maxlength="30" />
                                
                            </li>
                            <li>Event Date: To<br>
                                <input type="text" name="STwoDateTo" id="STwoDateTo" class="singleline" data-role="none" placeholder="MM/DD/YYYY or DD/MM/YYYY" maxlength="30" />
                            </li>
    The first part of the Javascript that loads the values into the fields looks like:

    Code JavaScript:
    function loadDataS2()
    			{ "use strict";
     
    				var setup2SummariesString = '';
    				var show2Summary = false;
     
    				setup2SummariesString += "--EVENT--\n  Date From: ";
    				if (localStorage["local.storage22.STwoDateFrom"] === undefined)
    				{
    					document.form2b["STwoDateFrom"].value = '';
    				}
    				else
    				{
    					document.form2b["STwoDateFrom"].value = localStorage["local.storage22.STwoDateFrom"];
    					setup2SummariesString += localStorage["local.storage22.STwoDateFrom"];
    					show2Summary = true;
    				}
     
     
    //                
     
    				setup2SummariesString += "";
    				if (localStorage["local.storage22.STwoDateTo"] === undefined)
    				{
    					document.form2b["STwoDateTo"].value = '';
    				}
    				else
    				{
    					document.form2b["STwoDateTo"].value = localStorage["local.storage22.STwoDateTo"];
                        setup2SummariesString += "\n  Date To: ";
    					setup2SummariesString += localStorage["local.storage22.STwoDateTo"];
    					show2Summary = true;
    				}
    //

    The second field that gets all the values from all the fields is:

    HTML Code:
                            <li><a href="#" data-role="button" data-theme="e" onclick="loadDataS2()">Load</a></li>
                            <li>Tap on Load to fill this area.
                           <br>Make any changes, then tap button below to export.<br><br> 
                           
                           <textarea name="setupSTwoSummary" cols="20" rows="7" wrap="hard" class="summaries" placeholder="Tap on Load to fill this area." data-role="none"></textarea>
                            <input type="submit" value="Send above summary via email"> </li> 
                        </ul>
    I hope that helps! This isn't online; it's in an app.

  8. #8
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This does not work either -- "Date From: " should not show if STwoDateFrom has no value, but with the following code it does anyway. I hoped the extra lines directly addressing the setup2SummariesString would prevent the string from appearing:

    Code JavaScript:
                setup2SummariesString += "--EVENT--";
    				if (localStorage["local.storage22.STwoDateFrom"] === undefined)
    				{
    					document.form2b["STwoDateFrom"].value = '';
                        setup2SummariesString += ""; // does not prevent the string "date from:" from showing.
                        show2Summary = false; // 'true' and 'false' do not prevent the string "date from:" from showing.
    				}
    				else
    				{
    					document.form2b["STwoDateFrom"].value = localStorage["local.storage22.STwoDateFrom"];
    				    setup2SummariesString += "\n  Date From: ";
    					setup2SummariesString += localStorage["local.storage22.STwoDateFrom"];
    					show2Summary = true;
    				}

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    complete working code

    Here's the complete working code. Try it in your browser.
    HTML Code:
    <!DOCTYPE html> 
    <html> 
    	<head> 
    	<title>TEST</title> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">  
            <script type="text/javascript" charset="utf-8">
    
                function html5StorageSupported()
                { "use strict";
                    return ('localStorage' in window) && window['localStorage'] !== null;
                }
    
                function determineNumberStoredElements()
                { "use strict";
                    return html5StorageSupported() ? localStorage.length : "Not Applicable";
                }
    
                function initialize()
                { "use strict";
      
                   document.form2a.supported.value = html5StorageSupported() ? "Yes!" : "No (:"; // summary
                    document.form2a.numStored.value = determineNumberStoredElements();
                  document.form2b.supported.value = html5StorageSupported() ? "Yes!" : "No (:"; // event info
                    document.form2b.numStored.value = determineNumberStoredElements();
                    }
                    
                    function persistDataS2()
                    { "use strict";
    
                          
                            var STwoDateFrom = document.form2b["STwoDateFrom"].value;
                            var storageIndex = "local.storage22.STwoDateFrom";
                            localStorage[storageIndex] = STwoDateFrom;
                                                   
                            var STwoDateTo = document.form2b["STwoDateTo"].value;
                            var storageIndex = "local.storage22.STwoDateTo";
                            localStorage[storageIndex] = STwoDateTo;
                    }
                    
                    
                    function loadDataS2()
    			{ "use strict";
    
    				var setup2SummariesString = '';
    				var show2Summary = false;
    
    
    				setup2SummariesString += "--EVENT--\n  Date From: ";
    				if (localStorage["local.storage22.STwoDateFrom"] === undefined)
    				{
    					document.form2b["STwoDateFrom"].value = '';
    				}
    				else
    				{
    					document.form2b["STwoDateFrom"].value = localStorage["local.storage22.STwoDateFrom"];
    					setup2SummariesString += localStorage["local.storage22.STwoDateFrom"];
    					show2Summary = true;
    				}
                 
    
    				setup2SummariesString += "";
    				if (localStorage["local.storage22.STwoDateTo"] === undefined)
    				{
    					document.form2b["STwoDateTo"].value = '';
    				}
    				else
    				{
    					document.form2b["STwoDateTo"].value = localStorage["local.storage22.STwoDateTo"];
                        setup2SummariesString += "\n  Date To: ";
    					setup2SummariesString += localStorage["local.storage22.STwoDateTo"];
    					show2Summary = true;
    				}
                    
    
    				if (show2Summary === true)
    				{
    					document.form2a["setupSTwoSummary"].value = setup2SummariesString;
    				}
    				else
    				{
    					document.form2a["setupSTwoSummary"].value = 'No content to display. Enter content in the fields for this setup and tap Save.';
    				}
    			}
                
                
    
                function clearDataS2()
                { "use strict";
                
                        localStorage.clear();
    
                        document.form2b["STwoDateFrom"].value = "";
                        document.form2b["STwoDateTo"].value = "";
                        
                        }
    </script>
    
    
    
    </head> 
    
    <body>         
      
    
                
                
             
                
                
                <!-- Start of first page -->
                <div data-role="page" id="STwoeventInfo" data-theme="b" data-add-back-btn="true">               
                    <div data-role="header">
                        <h2>Enter info here and click on Save</h2>
                    </div><!-- /header -->
                    
                    
                    <div data-role="content"><form name="form2b">
                        
                        <div data-role="controlgroup" data-type="horizontal">
                            <a href="#" data-role="button" data-theme="e" onclick="persistDataS2()">Save</a>
                        </div><br>
                        
                        <ul data-role="listview" data-dividertheme="b"> 
                            <li>Event Date: From [form2b, STwoDateFrom]<br>
                                <input type="text" name="STwoDateFrom" id="STwoDateFrom" class="singleline" data-role="none" placeholder="MM/DD/YYYY or DD/MM/YYYY" maxlength="30" />
                                
                            </li>
                            <li>Event Date: To [form2b, STwoDateTo]<br>
                                <input type="text" name="STwoDateTo" id="STwoDateTo" class="singleline" data-role="none" placeholder="MM/DD/YYYY or DD/MM/YYYY" maxlength="30" />
                            </li>
                                                            
                                        </ul>
                        
                    </form>   </div>  <!--content-->
                    
    
                </div><!-- /page -->
                
                 
                <!-- Start of first page -->
                <div data-role="page" id="setup2TOC" data-theme="b">
                    
                    <div data-role="header">
                        <h2>Click on Load to populate this field with above fields' values</h2>
                    </div><!-- /header -->      
                    
                    <div data-role="content"><form name="form2a">                    
                        <ul data-role="listview" data-dividertheme="b">                    
                           
                            <li><a href="#" data-role="button" data-theme="e" onclick="loadDataS2()">Load</a></li>
                                                   
                          <li>form2a, setupSTwoSummary
                          <br> <textarea name="setupSTwoSummary" cols="20" rows="7" wrap="hard" class="summaries" placeholder="Tap on Load to fill this area." data-role="none"></textarea>
                             </li> 
                        </ul>
                    </form>  </div>    <!--content-->                    
    
    
                </div><!-- /page -->                
        
    </body>
    </html>

  10. #10
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Code has been SOLVED

    I continued to play around with the code and accidentally came up with something that works! I changed the else statement into a else if statement.

    Code JavaScript:
                   setup2SummariesString += "--EVENT--";
    				if (localStorage["local.storage22.STwoDateFrom"] === undefined)
    				{
    					document.form2b["STwoDateFrom"].value = '';
    				}
    				else if (localStorage["local.storage22.STwoDateFrom"] != '')
    				{
    			document.form2b["STwoDateFrom"].value = localStorage["local.storage22.STwoDateFrom"];
                            setup2SummariesString += "\n  Date From: ";
    			setup2SummariesString += localStorage["local.storage22.STwoDateFrom"];
                            show2Summary = true;
    				} 
                    else 
                    {
                    show2Summary = true;
                    }

  11. #11
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    An alternative example that has been cleaned up

    Code JavaScript:
    var form2a = document.form2a,
        form2b = document.form2b;
     
    function persistDataS2() {
        localStorage.STwoDateFrom = form2b.STwoDateFrom.value;
        localStorage.STwoDateTo = form2b.STwoDateTo.value;  
    }
     
    function loadDataS2() {
        var summaryString = '',
        	showSummary = false,
        	fromStr = false;
     
    	form2b.STwoDateFrom.value = '';
    	form2b.STwoDateTo.value = '';
    	form2a.setupSTwoSummary.value = 'No content to display. Enter content in the fields for this setup and tap Save.';
     
    	if( localStorage.STwoDateFrom || localStorage.STwoDateTo ) {
    		if (localStorage.STwoDateFrom !== '') {
    			form2b.STwoDateFrom.value = localStorage.STwoDateFrom;
    			summaryString += 'Date From: ' + localStorage.STwoDateFrom;
    			showSummary = true;
    			fromStr = true
    		}			    
     
    		if (localStorage.STwoDateTo !== '') {
    			form2b.STwoDateTo.value = localStorage.STwoDateTo;
    			if( fromStr === true ) {
    				summaryString += '\n';
    			}
    			summaryString += 'Date To: ' + localStorage.STwoDateTo;			        
    			showSummary = true;
    		}
    	}
     
    	if (showSummary === true) {
    		form2a.setupSTwoSummary.value = '--EVENT-- \n' + summaryString;
    	}
    }


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
  •