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

[StevenHu]

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.

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--\
  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.

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

[ParkinT]

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;

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.

[StevenHu]

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.

[StevenHu]

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!

[StevenHu]

I commented out the show2Summary = true; and it did not do anything to the result. The result was displayed as normal. Hmmm…

[felgall]

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.

[StevenHu]

The HTML goes like this, using Jquery:

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

function loadDataS2()
			{ "use strict";

				var setup2SummariesString = '';
				var show2Summary = false;

				setup2SummariesString += "--EVENT--\
  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 += "\
  Date To: ";
					setup2SummariesString += localStorage["local.storage22.STwoDateTo"];
					show2Summary = true;
				}
//  

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

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

[StevenHu]

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:

            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 += "\
  Date From: ";
					setup2SummariesString += localStorage["local.storage22.STwoDateFrom"];
					show2Summary = true;
				}

[StevenHu]

Here’s the complete working code. Try it in your browser.

<!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--\
  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 += "\
  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>

[StevenHu]

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.

               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 += "\
  Date From: ";
			setup2SummariesString += localStorage["local.storage22.STwoDateFrom"];
                        show2Summary = true;
				} 
                else 
                {
                show2Summary = true;
                } 

[centered_effect]

An alternative example that has been cleaned up

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 += '\
';
			}
			summaryString += 'Date To: ' + localStorage.STwoDateTo;			        
			showSummary = true;
		}
	}

	if (showSummary === true) {
		form2a.setupSTwoSummary.value = '--EVENT-- \
' + summaryString;
	}
}