0

I have an form with multiple fields and I want to send data using OO-Programming, using the controller to get the data and setting/getting data in the model, I´m OK with doing this, but I thinking in case I have huge multiple form, how can I send data to model.

I created a form with few fields and used the controller and jQuery to get the form data and send it to the model.

Controller:

class FormController {

    constructor() {

        let $ = document.querySelector.bind(document);
        this.inputFname = $('#fname');
        this.inputLname = $('#lname');
        this.inputAge = $('#age');

    }

    add(event) {

        event.preventDefault();

        new Form(
            this.inputFname.value,
            this.inputLname.value,
            this.inputAge.value
        ); 
    }

}

Model:

class Form {

    constructor(fname, lname, age) {

        this.fname = fname;
        this.lname = lname;
        this.age = age;

    }

    get fullname() {

        return this.fname * this.lname;
    }

    get fname() {

        return this.fname;
    }

    get lname() {

        return this.lname;
    }

    get age() {

        return this.age;
    }
}

class form {

    constructor(fname, lname, age) {

        this.fname = fname;
        this.lname = lname;
        this.age = age;

    }

In form class constructor, in case I have multiple form fields, how can I send data to the constructor? If I have 20 fields in my form for example, do I necessarily need to write field by field and also create this.fieldname for each of the 20 fields?

user3837868
  • 917
  • 1
  • 12
  • 24
bernlt
  • 405
  • 2
  • 8
  • 20
  • Possible duplicate of [How to Implement DOM Data Binding in JavaScript](https://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript) – Jared Smith May 24 '19 at 12:50
  • 1
    You have two `class form {` in your code, which I'm assuming is copy/pasta. If you want to use this form of OOP, yes, you need to write field by field. Which is why no one does things this way :). – Heretic Monkey May 24 '19 at 12:51
  • 1
    There are plenty of libraries (and almost every framework offers DOM/JS data binding as well). Rolling your own is a path of pain and misery. Don't. – Jared Smith May 24 '19 at 12:53
  • @JaredSmith while this is true don't you think that advice is a little harsh? – chazsolo May 24 '19 at 13:27
  • @HereticMonkey do you have an example of OOP pattern, that has different approach, what is Todays best way to get data form and manipulate it using MVC. – bernlt May 24 '19 at 13:27
  • 1
    @chazsolo perhaps, but I did not intend it to be so. I was thinking more that it's the kind of thing that sounds like it wouldn't be too hard but actually winds up involving some tough design decision tradeoffs. I did it, but in retrospect wish I hadn't, and maybe some of my regret leaked through too much in my earlier comment. And of course if you want to do it adhoc rather than in the general case (as the OP's code is doing) it's unbearably tedious as heretic monkey pointed out. – Jared Smith May 24 '19 at 13:31
  • MVC (assuming you mean ASP.NET MVC) has its own pattern of use which does not depend on JavaScript. It uses basic HTML forms features. Microsoft also has worked on using Angular with MVC. You can find more on their site. – Heretic Monkey May 24 '19 at 13:31
  • @JaredSmith Yes, you are correct there are plenty of frameworks that I´m studying, but in order to fully understand how stuff works I want to fully understand how thing where done before, so my questions is, what I did is the way to do it and there no other options besides going to new frameworks, is this correct? Thanks! – bernlt May 24 '19 at 13:31
  • @bernlt it can be done in vanilla js (I've done it) but there's some non-obvious questions that come up. Here's a sample: if you're using event handlers and object getters/setters to keep the view and model in sync, how do you a) prevent an infinite update loop and b) make it performant? How do you handle errors? What if those errors occur in the event listener callbacks? Do you go two-way or one-way? etc. etc. It's complicated enough that it's the kind of thing you use a battle-tested popular implementation for. – Jared Smith May 24 '19 at 13:35
  • @bernlt Try [function factory pattern](https://medium.com/javascript-scene/javascript-factory-functions-with-es6-4d224591a8b1) and [composition](https://alligator.io/js/class-composition/) since you have a lot of fields that are similar. – zer00ne May 24 '19 at 13:49

0 Answers0