NEW LocalStorage - restart

by Lucille Kenney

HTML

<!-- member.html -->
<section>
    <form action="#" method="post" id="memberInfoForm">
        <fieldset>
            <legend>Add a Member</legend>
            <div>
                <label for="firstName">First Name</label>
                <input type="text" name="firstName" id="firstName">
            </div>
            <div>
                <label for="lastName">Last Name</label>
                <input type="text" name="lastName" id="lastName">
            </div>
            <div>
                <label for="email">Email</label>
                <input type="text" name="email" id="email">
            </div>
            <div>
                <label for="phone">Phone</label>
                <input type="text" name="phone" id="phone">
            </div>

            <!-- <input type="submit" value="Submit" id="submit">-->
        </fieldset>
        <fieldset class="formButtons">
            <input type="reset" id="btnReset" value="Clear" />
            <input type="submit" id="btnSubmit" value="Add Member" />
            <br />
            <input type="button" id="btnDisplayMembers" value="Display Members" />
        </fieldset>
    </form>
</section>
<section>
    <span id="messageSpan">&nbsp;</span>
</section>
                <section><span id="membersList"></span></section>

JavaScript

/* I'm starting over with clean paired down Data Object array bound to my form per Rob's 
suggestion as trying to bind html to the javascript I had working with local storage 
was a bad idea. It got too confusing. 

I'm modifying the example code from Rob Frenette's sections and Larry Bouthillier video demos. */

console.clear();

// My new paired down Array of Data Objects to hold data from my form
var members = [];
members = JSON.parse(localStorage.getItem("jsonMember"));

// My Member constructor function that takes (parameters)
function Member(memberFirstName, memberLastName, memberEmail) {
	this.memberFirstName = memberFirstName;
	this.memberLastName = memberLastName;
	this.memberEmail = memberEmail;
}

// Bind to an event handler. 
var memberInfoForm = document.getElementById('memberInfoForm');
memberInfoForm.onsubmit = function() {
	// Getting values from my form fields into variables
	var memberFirstName = document.getElementById('firstName').value;
	var memberLastName = document.getElementById('lastName').value;
	var memberEmail = document.getElementById('email').value;


    // Validation check for popualted fields if allValidData is true process data
    if (validateMemberData(firstName, lastName, email)) {

	    // Call the constructor: Create new members object then store it in array, i.e. (Push these var parameters to the var members array, Member function above.)
	    members.push(new Member(memberFirstName, memberLastName, memberEmail));

	    // add member to members array
        // addMember(members, firstName, lastName, email);
        var msg = 'Member ' + firstName.value + ' ' + lastName.value  + ' ' + email.value + ' ' + ' added.';
        btnReset.click();
        messageSpan.innerHTML = msg;
	 
	    console.clear();
		// Data can now be viewed in the console as an {object}

	    console.log(members);


	window.localStorage.setItem("jsonMember", JSON.stringify(members));
	console.log("\nHere's the stringified object returned from...