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

Question

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-->
</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<img src="images/help-icon.png">
<select class="form-control register-field highlight-hover" name="company">
<option value="noSelect">Select</option>
<option value="company2">Company 2</option>
</select>
Mobile Phone <img src="images/help-icon.png">
<input type="text" class="form-control register-field highlight-hover" autocomplete="tel" name="mobile" value="" placeholder="0005559999"><br>
Portal User Role <img src="images/help-icon.png">
<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-->
</div>
</div>

Answer 1

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.

Answer 2

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>
</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 <img src="images/help-icon.png">
<input type="text" autocomplete="tel" name="mobile" value="" placeholder="0005559999"><br>
Portal User Role <img src="images/help-icon.png">
<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>
</div>
</div>

Answer 3

Steps:
Create a div, append it to document.
Create a form, append it to div.
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.