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 +'"
一样。因此,例如:如果将operator设置为2,则{{ form.first_name }}
的ID将为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>