I have a text box that, depending on the number, has a set of form inputs as shown in the following screenshots:
TheproblemisthatwhenIenterthepageIhavethe1valueinthetextboxbuttheformdoesnotappeartome,Ihavetogothereandchangethenumbertothatappearsfollowstheimage:
Ihavethefollowingcodeinmyview:
<divclass="tab-pane fade fade-right push-30-t push-50" id="simple-progress-step3">
<div class="row" style="margin-bottom:150px;">
<div class="form-group col-xs-12">
<label>Numero de Dias do Evento</label>
<div class="input-group">
<input type="number" min="1" class="form-control" required id="txtNumDias" name="numdias" value="<?php echo set_value('numdias', 1); ?>"/>
</div>
</div>
<div id="divForm"></div>
<template id="tmplLinha">
<div class="col-md-12">
<div class="col-md-4">
Dia: <input type="text" class="inserir_data form-control" name="data[]" readonly="readonly" value="<?php echo set_value('data[]'); ?>"/>
</div>
<div class="col-md-4">
Hora de inicio
<div class="bootstrap-timepicker">
<input type="text" class="form-control inserir_hora" name="hinicio[]" value="<?php echo set_value('hinicio[]'); ?>"/>
</div>
</div>
<div class="col-md-4">
Hora fim:
<div class="bootstrap-timepicker">
<input type="text" class="form-control inserir_hora" name="hfim[]" value="<?php echo set_value('hfim[]'); ?>"/>
</div>
</div>
</div>
</template>
</div>
</div>
And the following code in my JS file:
$(document).ready(function() {
var txtQuantidade = document.getElementById("txtNumDias");
var divForm = document.getElementById("divForm");
if (document.getElementById("tmplLinha") !== null) {
var tmplLinha = document.getElementById("tmplLinha").content;
txtQuantidade.addEventListener("change", function () {
var quantidade = {};
quantidade.old = parseInt(divForm.dataset.qtd) || 0;
quantidade.new = parseInt(txtQuantidade.value) || 0;
if (quantidade.new > quantidade.old) {
for (var indice = quantidade.old; indice < quantidade.new; indice++) {
var linha = document.importNode(tmplLinha, true);
[].forEach.call(linha.querySelectorAll("input[id]"), function (input){
input.id = input.id + indice;
});
divForm.appendChild(linha);
$('.inserir_data').datepicker({format: 'yyyy/mm/dd'});
$('.inserir_hora').timepicker();
}
} else {
var linhas = [].slice.call(divForm.children, quantidade.new);
linhas.forEach(function (linha, indice) {
divForm.removeChild(linha);
});
}
divForm.dataset.qtd = quantidade.new;
});
};
}).trigger('onchange');
I wanted to open the page and a default form appears to me. Thanks