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>
            <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>
        <div id="output"></div>
    </form>
</section>
<section><span id="messageSpan">&nbsp;</span>

</section>
<section id="membersTableContainer">
    <!-- use a table here since we're displaying tabular data -->
    <table id="membersTable">
        <caption>
             <h3>Members</h3>

        </caption>
       ...

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


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;
}

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

    //create new member object then store it in array
    members.push(new Member(memberFirstName, memberLastName, memberEmail));
 
    console.clear();
    console.log(members);
    
    return false;
}

// Populate the page with the data entered on the form.
// Concatenate the values and place it in the message span
// This is actually working (gets posted to the browser) from my local Firefox browser

var msg = 'Member ' + firstName.value + ' ' + lastName.value  + ' ' + email.value + ' ' + ' added.';
messageSpan.innerHTML = msg;