Javascript多维数组不存储数据

Question

I'm trying to set up a multidimensional array/ of arrays to create a mini database for temporary use. For whatever reason the data won't store in the array. I'm not sure what I'm doing wrong.

HTML

<form>
<fieldset name="EmployeeInfo"> 
<legend>Employee Information</legend>

        <table style="width: 100%">
            <tr>
                <td style="width: 13%; height: 23px;" align="right">First Name:</td>
                <td style="width: 20%; height: 23px;">
                <input name="empFirst" style="width: 100%" type="text" maxlength="20" required /></td>
                <td style="width: 16%; height: 23px;" align="right">M.I.</td>
                <td style="width: 15%; height: 23px;" align="left">
                <input name="empMI" type="text" maxlength="1" style="width: 20%" required /></td>
                <td style="width: 16%; height: 23px;" align="right">Last 
                Name:</td>
                <td style="width: 20%; height: 23px;">
                <input name="empLast" style="width: 100%" type="text" maxlength="35" required /></td>
            </tr>
            <tr>
                <td align="right">Business Name:</td>
                <td>
                <input name="BusinessName" style="width: 100%" type="text" maxlength="35" required /></td>
                <td align="right">Address:</td>
                <td colspan="2" align="left">
                <input name="empAddress" style="width: 90%" type="text" maxlength="35" required /></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style1" style="height: 26px" align="right">City:</td>
                <td style="height: 26px">
                <input name="empCity" style="width: 100%" type="text" maxlength="25" /></td>
                <td class="auto-style1" style="height: 26px" required align="right">State:</td>
                <td style="height: 26px">
                <select name="empState">
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="DC">District Of Columbia</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI" selected="selected">Wisconsin</option>
                    <option value="WY">Wyoming</option>                 
                </select></td>
                <td class="auto-style1" style="height: 26px" align="right">ZIP:</td>
                <td style="height: 26px" align="left">
                <input name="empZIP" style="width: 50%" type="text" maxlength="5" required /></td>
            </tr>
</table>

Javascript

var empArray = [];

var storeArray = function (){
var employee = [];
employee["firstName"] = $("empFirst").value;
employee["MI"] = $("empMI").value;
employee["lastName"] = $("empLast").value;
employee["address"] = $("empAddress").value;
employee["city"] = $("empCity").value;
employee["state"] = $("empState").value;
employee["lastName"] = $("empZip").value;

empArray.push(employee);
updateList();
}

var updateList = function(employee){
for (var i in employee){
    var fullName = employee[i]["firstName"] + " " + employee[i]["MI"] + " " + employee[i]["lastName"];
    var employeeList = document.getElementById("drpEmp");
    var option = document.createElement("option");
    option.text = fullName;
    employeeList.add(option, employeeList[i]);
}
}

window.onload = function(){

$("btnNewEmp").onclick = storeArray;
}

[edit] Forgot the JSFiddle: https://jsfiddle.net/m06x7dn3/2/

Answer 1

Some issues:

• Your jQuery selectors are not matching anything - you need to do $("[name=empFirst]") or, even better, change all the name attributes to ids and use $("#empFirst") .
• You overwrite the last name with the zip code: employee["lastName"] = $("empZip").value;
• employee is an array but you are treating it like a struct.
• In updateList() you are iterating over employees - which does not exist - you need to iterate over empArray instead.

And there are more.... so I just rewrote it:

JSFIDDLE

HTML:

<form>
<fieldset name="EmployeeInfo"> 
    <legend>Employee Information</legend>

            <table style="width: 100%">
                <tr>
                    <td style="width: 13%; height: 23px;" align="right">First Name:</td>
                    <td style="width: 20%; height: 23px;">
                    <input id="empFirst" style="width: 100%" type="text" maxlength="20" required /></td>
                    <td style="width: 16%; height: 23px;" align="right">M.I.</td>
                    <td style="width: 15%; height: 23px;" align="left">
                    <input id="empMI" type="text" maxlength="1" style="width: 20%" required /></td>
                    <td style="width: 16%; height: 23px;" align="right">Last 
                    Name:</td>
                    <td style="width: 20%; height: 23px;">
                    <input id="empLast" style="width: 100%" type="text" maxlength="35" required /></td>
                </tr>
                <tr>
                    <td align="right">Business Name:</td>
                    <td>
                    <input id="BusinessName" style="width: 100%" type="text" maxlength="35" required /></td>
                    <td align="right">Address:</td>
                    <td colspan="2" align="left">
                    <input id="empAddress" style="width: 90%" type="text" maxlength="35" required /></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style1" style="height: 26px" align="right">City:</td>
                    <td style="height: 26px">
                    <input id="empCity" style="width: 100%" type="text" maxlength="25" /></td>
                    <td class="auto-style1" style="height: 26px" required align="right">State:</td>
                    <td style="height: 26px">
                    <select id="empState">
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                        <option value="AZ">Arizona</option>
                        <option value="AR">Arkansas</option>
                        <option value="CA">California</option>
                        <option value="CO">Colorado</option>
                        <option value="CT">Connecticut</option>
                        <option value="DE">Delaware</option>
                        <option value="DC">District Of Columbia</option>
                        <option value="FL">Florida</option>
                        <option value="GA">Georgia</option>
                        <option value="HI">Hawaii</option>
                        <option value="ID">Idaho</option>
                        <option value="IL">Illinois</option>
                        <option value="IN">Indiana</option>
                        <option value="IA">Iowa</option>
                        <option value="KS">Kansas</option>
                        <option value="KY">Kentucky</option>
                        <option value="LA">Louisiana</option>
                        <option value="ME">Maine</option>
                        <option value="MD">Maryland</option>
                        <option value="MA">Massachusetts</option>
                        <option value="MI">Michigan</option>
                        <option value="MN">Minnesota</option>
                        <option value="MS">Mississippi</option>
                        <option value="MO">Missouri</option>
                        <option value="MT">Montana</option>
                        <option value="NE">Nebraska</option>
                        <option value="NV">Nevada</option>
                        <option value="NH">New Hampshire</option>
                        <option value="NJ">New Jersey</option>
                        <option value="NM">New Mexico</option>
                        <option value="NY">New York</option>
                        <option value="NC">North Carolina</option>
                        <option value="ND">North Dakota</option>
                        <option value="OH">Ohio</option>
                        <option value="OK">Oklahoma</option>
                        <option value="OR">Oregon</option>
                        <option value="PA">Pennsylvania</option>
                        <option value="RI">Rhode Island</option>
                        <option value="SC">South Carolina</option>
                        <option value="SD">South Dakota</option>
                        <option value="TN">Tennessee</option>
                        <option value="TX">Texas</option>
                        <option value="UT">Utah</option>
                        <option value="VT">Vermont</option>
                        <option value="VA">Virginia</option>
                        <option value="WA">Washington</option>
                        <option value="WV">West Virginia</option>
                        <option value="WI" selected="selected">Wisconsin</option>
                        <option value="WY">Wyoming</option>                 
                    </select></td>
                    <td class="auto-style1" style="height: 26px" align="right">ZIP:</td>
                    <td style="height: 26px" align="left">
                    <input id="empZip" style="width: 50%" type="text" maxlength="5" required /></td>
                </tr>
    </table>
</fieldset>
    <div style="border-style: solid; border-width: 1px; width: 434px; height: 164px">
        &nbsp;<select multiple="multiple" id="drpEmp" style="float: left; width: 256px; height: 121px;">
        </select><br />
        <input id="btnNewEmp" type="button" value="New Employee" style="width: 149px" /> <br /><br/>
        <input id="btnEdtEmp" type="button" value="Edit Employee" style="width: 149px" />
        <br />
        <br />
        <input id="btnDelEmp" type="button" value="Delete Employee" />      

    </div>
&nbsp;<br />
</div>
</form>

JavaScript:

$( document ).ready( function(){
    var firstName = $("#empFirst"),
        MI        = $("#empMI"),
        lastName  = $("#empLast"),
        business  = $("#BusinessName"),
        address   = $("#empAddress"),
        city      = $("#empCity"),
        state     = $("#empState"),
        zip       = $("#empZip"),
        employees = $("#drpEmp"),
        newBtn    = $("#btnNewEmp"),
        edtBtn    = $("#btnEdtEmp"),
        delBtn    = $("#btnDelEmp"),
        selected  = null;

    function Employee(){
        var that = this;
        this.option = 
            $( "<option />" )
                .data( "employee", this )
                .prop( 'selected', true )
                .on( 'click', function(){ that.edit() } );

        employees.append( this.option );
        this.update();
        edtBtn.prop( 'disabled', false );
        delBtn.prop( 'disabled', false );
    }

    Employee.prototype.update = function(){
        this.firstName = firstName.val();
        this.MI        = MI.val();
        this.lastName  = lastName.val();
        this.business  = business.val();
        this.address   = address.val();
        this.city      = city.val();
        this.state     = state.val();
        this.zip       = zip.val();
        this.option.text( this.getFullName() );
    }

    Employee.prototype.getFullName = function(){
        return [ this.firstName, this.MI, this.lastName ].join( ' ' );
    }

    Employee.prototype.edit = function(){
        firstName.val( this.firstName );
        MI.val( this.MI );
        lastName.val( this.lastName );
        business.val( this.business );
        address.val( this.address );
        city.val( this.city );
        state.val( this.state );
        zip.val( this.zip );
        selected = this;
        edtBtn.prop( 'disabled', false );
        delBtn.prop( 'disabled', false );
    }

    newBtn
        .on( 'click', function(){
            selected = new Employee();
        });

    edtBtn
        .on( 'click', function(){
            if ( selected != null )
                selected.update();
        })
        .prop( 'disabled', true );

    delBtn
        .on( 'click', function(){
            $( "option:selected", employees ).remove();
            selected = null;
            edtBtn.prop( 'disabled', true );
            delBtn.prop( 'disabled', true );
        })
        .prop( 'disabled', true );
});