How can I make this form dynamically with ES6 by extending a base class form?

es6 classes
if a class extends another class what parameters in the parent class can be seen in the child
es6 subclass
javascript extend class
parent class javascript
when inheriting from a parent class what does the super keyword do in the child's constructor
javascript class inheritance
javascript dynamic extend class

I would like to make forms in JS that act like they're inheriting...For example, I can easily append form elements all day long using a for loop, but I'd rather leave myself the freedom to insert a different element in the middle. In other words, I want this to be 'modular', and have a base class that can generate something simple like a login screen, but then extend it to include dropdowns in between text fields. Any ideas as to how to make this happen? Preferably with ES6 classes and import/export and without the webpack nonsense. Ideally i'd have a class called BasicForm and have RegistrationForm extends BasicForm. This way, I could simply store field names in an array and change that file once if i needed to make changes as opposed to changing everything. Here's the existing code....Note that "invoices" is only shown if the user role option selected is "admin"....which makes the idea of trying to make this all very difficult for me to comprehend. Is there any way to procedurally generate, with bootstrap and custom classes, this from Javascript using ES6 classes, such that the module may be reused to create forms either with or without dropdowns?

HTML:

<div class= "row">  <!--Inherits background from .body-->
    <div class="col-hidden col-sm col-md col-lg col-xl">     <!--spacing divs inherit background from .body-->
        &nbsp;
    </div>
    <div class="form-box rounded col-12 col-xs col-sm-7 col-md-6 col-lg-4 col-xl-3">  <!--Actual box containing fields and prompts and buttons changes to new background-->
        <h2 class="portal-heading">Registration</h2>
        <form name="new_user_form">
            Email Address<input type="text" class="form-control register-field highlight-hover" name="email" value="" placeholder="Email Address"><br>
            Re-Enter Email Address<input type="text" class="form-control register-field highlight-hover" autocomplete="off" name="email" value="" placeholder="Re-enter Email Address"><br>
            First Name<input type="text" class="form-control register-field highlight-hover" autocomplete="given-name" name="firstname" value="" placeholder="First Name"><br>
            Last Name<input type="text" class="form-control register-field highlight-hover" autocomplete="family-name" name="lastname" value="" placeholder="Last Name"><br>
            Company Name<a href="#" class="help-icon" data-toggle="tooltip" title="Choose your company name.  If you do not see it here, please contact ACSI to become an official distributor."><img src="images/help-icon.png"></a>
            <select class="form-control register-field highlight-hover" name="company">
                <option value="noSelect">Select</option>
                <option value="company2">Company 2</option>
            </select>
            Mobile Phone <a href="#" class="help-icon" data-toggle="tooltip" title="This is used for password recovery only."><img src="images/help-icon.png"></a>
            <input type="text" class="form-control register-field highlight-hover" autocomplete="tel" name="mobile" value="" placeholder="0005559999"><br>
            Portal User Role <a href="#" class="help-icon" data-toggle="tooltip" title="Portal admins are the administrators for your company."><img src="images/help-icon.png"></a>
            <select class="form-control register-field highlight-hover" name="role" id="user-role">
                <option value="user">User</option>
                <option value="admin">Admin</option>
            </select>

            <div id="invoices">
                Enter two recent invoice totals in USD($)<br>
                Invoice 1<input type="text" class="form-control register-field highlight-hover" name="invoice1" value="" placeholder="0.00">
                Invoice 2<input type="text" class="form-control register-field highlight-hover" name="invoice2" value="" placeholder="0.00">
            </div> 
            <button class="btn btn-block highlight-hover" id="submit">Submit</button>
        </form>
    </div>
    <div class="col-hidden col-sm col-md col-lg col-xl">     <!--spacing divs-->
        &nbsp;
    </div>
</div>

I would suggest using Web Components. They're native, have support in Chrome with other browsers soon to come, and you can use a polyfill for other browsers. With below code:

class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();
    //put code here
  }
}

Insert code found at https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements after super() with your element functionality

Define a new element: `customElements.define('popup-info', PopUpInfo);

And then you can use it like this:

<popup-info img="img/alt.png" text="Your card validation code (CVC)
is an extra security feature — it is the last 3 or 4 numbers on the
back of your card.">

Example taken from link above, in Mozilla's Dev Site.

inheritance, I would suggest using Web Components. They're native, have support in Chrome with other browsers soon to come, and you can use a polyfill  Background. ES6 Classes formalize the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes. They are effectively simple sugaring over prototype-based OO, offering a convenient declarative form for class patterns which encourage interoperability. Classes (as shipped in Chrome)

Not sure if this can help (?): classList, it is meant to test if a class exist, at a precise position.

It isn't well documented, but found it very useful to bind stuffs.

Using a timeout for the demo (Added id="company" class="hidden"):

function toggle(id){ 
 if (id.classList[0] === "hidden"){
    id.classList = "unhidden"
  }
  else {
    id.classList = "hidden"
  }
}

setTimeout(function(){

  toggle(company)

},3000)
.hidden {display: none}
.unhidden {display: block}
<div class= "row"> 
    <div>   
        &nbsp;
    </div>
    <div>
        <h2>Registration</h2>
        <form name="new_user_form">
            Email Address<input type="text" name="email" value="" placeholder="Email Address"><br>
            Re-Enter Email Address<input type="text" autocomplete="off" name="email" value="" placeholder="Re-enter Email Address"><br>
            First Name<input type="text"  autocomplete="given-name" name="firstname" value="" placeholder="First Name"><br>
            Last Name<input type="text"  autocomplete="family-name" name="lastname" value="" placeholder="Last Name"><br>
            Company Name<a href="#"
            data-toggle="tooltip" title="Choose your company name.  If you do not see it here, please contact ACSI to become an official distributor."><img src="images/help-icon.png"></a>
            <select id="company" class="hidden" name="company">
                <option value="noSelect">Select</option>
                <option value="company2">Company 2</option>
            </select>
            Mobile Phone <a href="#" class="help-icon" data-toggle="tooltip" title="This is used for password recovery only."><img src="images/help-icon.png"></a>
            <input type="text" autocomplete="tel" name="mobile" value="" placeholder="0005559999"><br>
            Portal User Role <a href="#" data-toggle="tooltip" title="Portal admins are the administrators for your company."><img src="images/help-icon.png"></a>
            <select name="role" id="user-role">
                <option value="user">User</option>
                <option value="admin">Admin</option>
            </select>

            <div id="invoices">
                Enter two recent invoice totals in USD($)<br>
                Invoice 1<input type="text" name="invoice1" value="" placeholder="0.00">
                Invoice 2<input type="text" name="invoice2" value="" placeholder="0.00">
            </div> 
            <button  id="submit">Submit</button>
        </form>
    </div>
    <div> 
        &nbsp;
    </div>
</div>

ES6 In Depth: Subclassing - Mozilla Hacks, ES6 In Depth is a series on new features being added to the JavaScript where one class uses another as a base, and then extends it by adding more features of its own. reviewing property inheritance and the dynamic prototype chain. Recall that when we create a class, we make a new function  In the properties for the project, change the output type from Windows Application to Class Library and click OK. From the File menu, choose Save All to save the project and files to the default location. Next add the buttons and the panel to the base form.

Steps:

  1. Create a div, append it to document.
  2. Create a form, append it to div.
  3. Create fieldsets, append to form.

4.Create form fields, append to fieldset.

class BasicForm {
    constructor(formId,formTitle) {
        this.form               = document.createElement('form');
        this.form.id            = formId;
        this.form.method        = 'post';
        this.form.enctype       = 'multipart/form-data';
        this.topFieldset        = document.createElement('fieldset');
        this.topLegend          = document.createElement('legend');
        this.topLegend.appendChild(document.createTextNode(formTitle));
        this.topFieldset.appendChild(this.topLegend);
        this.form.appendChild(this.topFieldset);
        this.div                = document.createElement('div');        
        this.div.appendChild(this.form);         
        // add div to the document
        // add fields to the topFieldset
    }
}


class  RegistrationForm extends BasicForm {
    constructor() {
        super();
        // add fields of derived form
    }
}

Note: the code is not tested.

Dynamic super classes (extends) in ES6 – MikeDoesWeb, Create a class factory which allows dynamic super classes to by applied to an es6 class (dynamic inheritance). This will be transparent to a  How can I make this form dynamically with ES6 by extending a base class form? and have a base class that can generate something simple like a login screen, but

Newest 'es6-class+inheritance+dynamically-generated' Questions , How can I make this form dynamically with ES6 by extending a base class form? I would like to make forms in JS that act like they're inheritingFor example, I  The extends keyword is used in class declarations or class expressions to create a class which is a child of another class. The source for this interactive example is stored in a GitHub repository.

Generating Config driven Dynamic Forms using Web Components, Generating Config driven Dynamic Forms using Web Components us create custom html elements by extending the existing elements or base elements We can register the given component class onto the current window by doing Please note that, it'll be better to use an ES6 Map here to avoid unnecessary load of  Two ways to do the same thing. Almost. React traditionally provided the React.createClass method to create component classes, and released a small syntax sugar update to allow for better use with ES6 modules by extends React.Component, which extends the Component class instead of calling createClass.

How ES6 classes really work and how to build your own, The 6th edition of ECMAScript (or ES6 for short) revolutionized the language, adding Javascript has what is called prototypal inheritance, which sounds scary, but is actually simpler than traditional class based inheritance once you get the [[Construct]] , and by extension, Reflect.construct , actually take three parameters. How to: Inherit Windows Forms. 03/30/2017; 2 minutes to read +9; In this article. Creating new Windows Forms by inheriting from base forms is a handy way to duplicate your best efforts without going through the process of entirely recreating a form every time you require it.

Comments
  • Does the lack of answers here indicate that there is no solution whatsoever?
  • have you considered using WebComponents?
  • I'm looking to kinda avoid more third party junk.
  • I wound up using jQuery's .append() to just stick it in there and then .detatch() when I'm done.
  • point was to not have too much html in the main file and do it using more JS style things