Javascript: Trying to create a constructor that takes form input as the arguments

Question

I'm having a Javascript issue that is driving me crazy. I'm trying to hook up a form to a constructor function. It should grab the values of the input fields and then set them equal to the properties in the new Person object.

The problem is that on submit, it's setting the properties equal to empty strings, and I can't figure out why, even though I know the live values are being update on change.

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>

`updateValue($(this), $(this).val());`, being equivalent to `$($(this)).val($(this).val());` makes no sense at all. It's doing `this.value = this.value`, which changes nothing. — Bergi, Feb 04 '17 at 18:58
Are you sure you're adding the `submit` listener [after dom ready](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element)? Your stack snippet doesn't. — Bergi, Feb 04 '17 at 19:01
I may be wrong, but this kind of selector can trying to select an array instead of object, and you trying to get val of array instead it's first element — Kejt, Feb 04 '17 at 19:02
@Bergi Yeah. I removed them. Those were just test functions so I could visualize what was happening in my head. I added in a DOM ready function, but it didn't really fix my problem. — Marty, Feb 04 '17 at 19:21
Your code is working here: https://jsfiddle.net/mrlew/7gamt2ez/2/ (just fixed the parameters order) — mrlew, Feb 04 '17 at 19:29
Your code is already working https://jsfiddle.net/kc4zk6u7/ It is not just working in stackoverflow .... — Thirueswaran Rajagopalan, Feb 04 '17 at 19:38
@ThirueswaranRajagopalan It's missing an onload handler around the submit callback installation — Bergi, Feb 04 '17 at 19:51
@mrlew The code is working actually! I now narrowed down that my problem is that I am not using the script correctly! I am building a React app, but it's not letting me just put the script tag in the HTML without throwing and error that there is an expected " — Marty, Feb 04 '17 at 20:03
@Bergi even registering the submit handler inside in the document onload handler also didn't work in StackOver's tool for me . Just give it a try, maybe I can be worng too. — Thirueswaran Rajagopalan, Feb 04 '17 at 20:29

score 0 · Answer 1 · answered Feb 04 '17 at 19:17

change constructor order

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

Sorry, what exactly did you change here? And what is the problem with the original code? — Bergi, Feb 04 '17 at 19:25
function Person(first, last, address, number, email) to function Person(first, last, email,address, number) -@Bergi — Ronniemittal, Feb 04 '17 at 19:40

score 0 · Answer 2 · answered Feb 04 '17 at 19:28

I think your code looks fine except the order of the arguments passed to the constructor is wrong. Here is how it should be:

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

Also, StackOverflow code snippets will not allow to handle submit event. So here is a pen with working code: http://codepen.io/jetpackpony/pen/ggKrgb?editors=1011

Javascript: Trying to create a constructor that takes form input as the arguments

2 Answers2