2015-06-10 3 views
-1

Я пытаюсь настроить многомерный массив/массивов для создания мини-базы данных для временного использования. По какой-либо причине данные не будут храниться в массиве. Я не уверен, что я делаю неправильно.Многомерный массив Javascript, не сохраняющий данные

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

[править] Забыли JSFiddle: https://jsfiddle.net/m06x7dn3/2/

+0

Проверьте наличие ошибок в консоли JavaScript. – folkol

+0

Я был, и он прошел без ошибок. Все переменные остаются неопределенными, даже если они есть в полях. – CaptObvious42

ответ

0

Некоторые вопросы:

  • Ваши JQuery селекторы ничего не соответствует - вам нужно сделать $("[name=empFirst]") или, еще лучше, изменить все названия атрибутов ids и использовать $("#empFirst").
  • Вы переписываете фамилию почтовым индексом: employee["lastName"] = $("empZip").value;
  • employee - это массив, но вы рассматриваете его как структуру.
  • В updateList() вы делаете итерацию свыше employees, которой не существует - вместо этого вам необходимо перебрать empArray.

И есть больше .... так что я просто переписал:

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); 
}); 
+0

И это сделало трюк (и спасло меня много времени.) Спасибо! – CaptObvious42