Javascript: попытка создать конструктор, который принимает форму ввода как аргументы

Question

У меня проблема с Javascript, которая сводит меня с ума. Я пытаюсь подключить форму к функции конструктора. Он должен захватить значения полей ввода, а затем установить их равными свойствам в новом объекте Person.

Проблема заключается в том, что при отправке оно устанавливает свойства равными пустым строкам, и я не могу понять, почему, хотя я знаю, что значения live обновляются при изменении.

Script

//will hold an array of people objects 
 
var list = []; 
 

 
//constructor that builds new people to add to address book 
 
function Person(first, last, address, number, email) { //new person constructor 
 
    this.firstName = first; 
 
    this.lastName = last; 
 
    this.address = address; 
 
    this.number = number; 
 
    this.email = email; 
 
}; 
 

 
// When the submit button is clicked, create a new person and add the values of 
 
// the form fields to the properties of the object 
 
$("#addform").submit(function (e) { 
 
    e.preventDefault(); 
 
    var person = new Person($("input[name = 'fname']").val(), 
 
          $("input[name = 'lname']").val(), 
 
          $("input[name = 'email']").val(), 
 
          $("input[name = 'address']").val(), 
 
          $("input[name = 'phone']").val()); 
 
    list.push(person); 
 
    console.log(list); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="addform"> 
 
     <input type="text" name="fname" placeholder="First name"> 
 
     <input type="text" name="lname" placeholder="Last name"> 
 
     <input type="email" name="email" placeholder="email"> 
 
     <input type="input" name="address" placeholder="address"> 
 
     <input type="tel" name="phone" placeholder="phone number"> 
 
     <button type="submit" id="submitbtn">Submit</button> 
 
     <button type="button" id="closebtn">Close</button> 
 
    </form>

Answer 1

изменения конструктор порядка

//will hold an array of people objects 
var list = []; 

//constructor that builds new people to add to address book 
function Person(first, last, email,address, number) { //new person constructor 
    this.firstName = first; 
    this.lastName = last; 
    this.address = address; 
    this.number = number; 
    this.email = email; 
}; 

//TEST: updates live value of form field 
function updateValue(selector, value) { 
    $(selector).val(value); 
} 

// TEST: When input is changed, updates live value of whatever form field is 
// active 
$("#addform > input") 
    .change(function() { 
     updateValue($(this), $(this).val()); 
    }); 

// When the submit button is clicked, create a new person and add the values of 
// the form fields to the properties of the object 
$("#addform").submit(function (e) { 
    e.preventDefault(); 
    var person = new Person($("input[name = 'fname']").val(), 
          $("input[name = 'lname']").val(), 
          $("input[name = 'email']").val(), 
          $("input[name = 'address']").val(), 
          $("input[name = 'phone']").val()); 
    list.push(person); 
    console.log(list); 
}); 

Answer 2

Я думаю, что ваш код выглядит нормально, за исключением того, порядок аргументов, передаваемых в конструктор неправильно. Вот как это должно быть:

//will hold an array of people objects 
var list = []; 

//constructor that builds new people to add to address book 
function Person(first, last, address, number, email) { //new person constructor 
    this.firstName = first; 
    this.lastName = last; 
    this.address = address; 
    this.number = number; 
    this.email = email; 
}; 

// When the submit button is clicked, create a new person and add the values of 
// the form fields to the properties of the object 
$("#addform").submit(function (e) { 
    e.preventDefault(); 
    var person = new Person($("input[name = 'fname']").val(), 
          $("input[name = 'lname']").val(), 
          $("input[name = 'address']").val(), 
          $("input[name = 'phone']").val(), 
          $("input[name = 'email']").val()); 
    list.push(person); 
    console.log(list); 
}); 

Кроме того, StackOverflow фрагменты кода не позволяют обрабатывать submit событие. Итак, вот ручка с рабочим кодом: http://codepen.io/jetpackpony/pen/ggKrgb?editors=1011