Как я могу сделать эту форму динамически с ES6, расширяя форму базового класса?

Question

Я бы хотел, чтобы формы в JS действовали так, как будто они наследуются ... Например, я могу легко добавлять элементы формы весь день, используя цикл for, но я бы предпочел оставить себе свободу вставлять другой элемент в середине. Другими словами, я хочу, чтобы это было «модульным» и имело базовый класс, который может генерировать что-то простое, например, экран входа в систему, но затем расширить его, включив раскрывающиеся списки между текстовыми полями. Есть идеи, как это сделать? Желательно с классами ES6 и импортом / экспортом и без чепухи. В идеале у меня был бы класс с именем BasicForm и RegistrationForm extends BasicForm. Таким образом, я мог бы просто хранить имена полей в массиве и изменять этот файл один раз, если мне нужно было внести изменения, а не менять все. Вот существующий код ... Обратите внимание, что "счета-фактуры" отображается только в том случае, если выбран вариант роли пользователя "admin" .... что делает идею попытки сделать все это очень трудной для понимания. Есть ли способ процедурно с помощью начальной загрузки и пользовательских классов генерировать это из Javascript с использованием классов ES6, чтобы модуль можно было повторно использовать для создания форм с раскрывающимися списками или без них?

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>

Answer 1

Не уверен, что это может помочь (?): classList , он предназначен для проверки, существует ли класс, в точной позиции.

Это плохо документировано, но было очень полезно связывать вещи.

Использование тайм-аута для демонстрации ( Добавлено 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>

Answer 2

Шаги:

1. Создайте div, добавьте его в документ.
2. Создайте форму, добавьте ее в div.
3. Создайте набор полей, добавьте в форму.

4.Создайте поля формы, добавьте к 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
    }
}

Примечание: код не проверен.

Answer 3

Я бы предложил использовать веб-компоненты. Они являются родными, имеют поддержку в Chrome с другими браузерами в ближайшее время, и вы можете использовать polyfill для других браузеров. С кодом ниже:

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

Введите код, найденный на https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements после super() с функциональностью вашего элемента

Определить новый элемент: `customElements.define ('popup-info', PopUpInfo);

И тогда вы можете использовать это так:

<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.">

Пример взят по ссылке выше, на сайте разработчиков Mozilla.