Why input type = text doesn’t work for change event jquery

  ajax, jquery, laravel

I have the following form :

            <div class="input-group date">
            <input type="text" class="form-control" id="casting_date_naissance"name="casting_date_naissance">
            <span class="input-group-text input-group-append input-group-addon">
               <i class="simple-icon-calendar"></i>
            </span>
        </div>
     <div class="form-group col-md-6 js-guarantor-container" hidden>
        <label for="guarantor">Nom et prénom du représentatnt légal </label>
        <input type="text" class="form-control" id="guarantor" name="guarantor" placeholder="Représentant">
    </div>
     <div class="form-group col-md-6 js-guarantor_identification_number-container" hidden>
        <label for="guarantor_identification_number">CIN du représentatnt légal</label>
        <input type="number" class="form-control" id="guarantor_identification_number" name="guarantor_identification_number" placeholder="CINE">
        </div> 
     <div class="form-group col-md-6 js-guarantor_lien-container" hidden>
        <label for="guarantor_identification_number">Lien</label>
        <input type="text" class="form-control" id="casting_lien" name="casting_lien" placeholder="Lien">
     </div>

And when I enter a date, based on this date, I check if the age is less than or equal to 18.

So to do date I’m using the following code :

var dateinput = document.getElementById("casting_date_naissance");
var guarantorContainer = document.querySelector('.js-guarantor-container');
var guarantorIdentificationNumberContainer = document.querySelector('.js-guarantor_identification_number-container');
var guarantorLienContainer = document.querySelector('.js-guarantor_lien-container');

    dateinput.addEventListener('change', function(evt) {
        var a=  moment().diff(moment(evt.target.value, "YYYY/MM/DD"), 'years');
    if (a < 18) {
    guarantorContainer.removeAttribute('hidden');
    guarantorIdentificationNumberContainer.removeAttribute('hidden');
    guarantorLienContainer.removeAttribute('hidden');
    } else {
    guarantorContainer.setAttribute('hidden', true);
    guarantorIdentificationNumberContainer.setAttribute('hidden', true);
    guarantorLienContainer.setAttribute('hidden',true);
    }
    });

in this case, doesn’t work, and the change event doesn’t fire.

But when I change the html of input date to :

 <input type="date" class="form-control" id="casting_date_naissance" name="casting_date_naissance">

It works very well, and the change event fires.

Source: Laravel

Leave a Reply