memberList2.html newMemberList.js

by Angela Baruth

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>
            <div>
                <label for="month">Month</label>
                <select name="month" id="month">
                    <option value="March">March</option>
                    <option value="April">April</option>
                    <option value="May">May</option>
                    <option value="June">June</option>
                </select>
            </div>
            <div>
                <label for="task">Task</label>
                <input type="text" name="task" id="task">
            </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>
        <div id="membersList"></div>

JavaScript

console.clear();

// My new paired down Array of Data Objects to hold data from my form
var members = [];

// 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 localStorage");
	console.log(window.localStorage.getItem("jsonMember"));

	// Store the string in local storage
	//window.localStorage.getItem("members", jsonMember);
	var s = JSON.parse(window.localStorage.getItem("jsonMember"));
	console.log("\nHere's the object returned from localStorage and parsed back to an object");
	console.log(s);

	   for (var j=0; j<s.length; j++) {
   ...