Как объединить счетчик с выражением Jinja2? - PullRequest
0 голосов
/ 06 июля 2018
var operator = 1;

        function add_fields() {
            operator++; 
            var objTo = document.getElementById('name_fields');
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "form-group removeclass"+operator);
            var rdiv = 'removeclass'+operator;
            divtest.innerHTML = '<h5 class="support-subform-label" style="text-align: left;">Equipment Operator(s) </h5> <div class="support-subform-box" id="js-section'+ operator +'"> <label id="first_name-group" for="first_name" class="small-12 medium-6" style="text-align: left; float: left;"> First Name {{ form.first_name }} </label><label id="last_name-group" for="last_name" class="small-12 medium-6" style="text-align: left; float: right;"> Last Name {{ form.last_name }} </label><label for="email" style="text-align: left;"> Email {{ form.email }} </label><label id="phone-number-group" for="phone-number" class="small-12 medium-7" style="text-align: left; float: left;"> Phone Number {{ form.phone.number }} </label><label id="phone-extension-group" for="phone-extension" class="small-12 medium-5" style="text-align: left; float: left;"> ext {{ form.phone.extension }} </label><label class="small-12" style="text-align: left;"> Title {{ form.position }} </label> <br> <div class="input-group-btn"> <button class="btn btn-success" type="button" onclick="remove_fields('+ operator +');"> Remove </button> </div> </div>';

            objTo.appendChild(divtest);
            scroll(operator);
        }

Я пытаюсь добавить счетчик (operator) к каждому выражению Jinja {{ form.first_name }} так же, как я сделал id="js-section'+ operator +'". Например, если для оператора установлено значение 2, идентификатор {{ form.first_name }} будет равен id = "first_name2" и т. Д. В зависимости от счетчика.

Я пытался

{{ form.first_name'+ operator +' }}  

, чтобы повторить, как я сделал id="js-section'+ operator +'", но, очевидно, это не сработало. Спасибо!

Ниже приведен divtest.innerHTML в удобочитаемом формате.

        <h5 class="support-subform-label"
            style="text-align: left;">Equipment Operator(s)
        </h5>
        <div class="support-subform-box" id="js-section'+ operator +'">
            <label id="first_name-group" for="first_name"
                class="small-12 medium-6"
                style="text-align: left;
                       float: left;">
                First Name<b style="color: red;">*</b>
                {{ form.first_name }}
            </label>

            <label id="last_name-group" for="last_name"
                class="small-12 medium-6"
                style="text-align: left;
                       float: right;">
                Last Name<b style="color: red;">*</b>
                {{ form.last_name }}
            </label>
            <label for="email"
                style="text-align: left;">
                Email<b style="color: red;">*</b>
                {{ form.email }}
            </label>
            <label id="phone-number-group" for="phone-number"
                class="small-12 medium-7"
                style="text-align: left;
                    float: left;">
                Phone Number<b style="color: red;">*</b>
                {{ form.phone.number }}
            </label>
            <label id="phone-extension-group" for="phone-extension" class="small-12 medium-5"
                style="text-align: left; float: left;">
                ext
                {{ form.phone.extension }}
            </label>

            <label class="small-12"
               style="text-align: left;">
            Title<b style="color: red;">*</b>
            {{ form.position }}
            </label>
            <div class="input-group-btn">
                <button class="btn btn-success" type="button" onclick="remove_fields('+ operator +');"> Remove </button>
            </div>
        </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...