Show form in page load

Question

I have a text box which, depending on the number, displays a set of inputs form as presented in the following images:

The problem is that when I enter the page I have as default value 1 in the text box but the form does not appear to me, I have to go there and change the number so that it appears follows the image:

I have the following code in my view:

<div class="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 that when opening the page to me appears immediately a form opened by default. Thank you

Answer 1

Simply put, I believe you can only invoke the onchange of input as soon as the page loads.

At the end of $(Document). ready can call:

$('#txtNumDias').change();