Javascript : 양식 입력을 인수로 사용하는 생성자를 만들려고합니다.

Question

나를 미치게 만드는 Javascript 문제가 있습니다. 양식을 생성자 함수에 연결하려고합니다. 입력 필드의 값을 가져 와서 새 Person 객체의 속성과 동일하게 설정해야합니다.

문제는 제출시 빈 문자열과 동일한 속성을 설정하는 것이므로 변경 사항이 실시간 값으로 업데이트되고 있음에도 불구하고 이유를 알 수 없습니다.

스크립트

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