JavaScript DateOfBirth Change Problem on UI.

JavaScript DateOfBirth Change Problem on UI.

  

Hi Friends,


I have added a javascript on change of a input on first try it is working good but on second try it is not.


Please have a look of working on the following link:

https://devsoftware-dev.outsystemsenterprise.com/IPRUHealthCalculator


Please click on self on the above link and type your birthdate and change the same you will see the working.


I have used the following javascript :


"
var newInput = document.getElementById('"+ dateofBirthApplicant1.Id+"');
var x = document.getElementById('"+ dateofBirthApplicant1.Id +"').value;
newInput.addEventListener('change', function( e ){
var d = new Date();
var year = x.substr(6,9);
var day = x.substring(0,2);
var month = x.substring(3,5);
if((x.length<10) || (day>31 || month>12 || year>d.getFullYear()) || (day>29 && month==2) || (day==29 && month==2 && (year%4!=0))) {
document.getElementById('"+ ageContainerApplicant1.Id +"').innerHTML = x;
}
else {
var age = d.getFullYear() - year;
if(age<18 || age>60) {
document.getElementById('"+ ageContainerApplicant1.Id +"').innerHTML = 'This option is available only for age between 18 to 60 years';
}
else {
document.getElementById('"+ ageContainerApplicant1.Id +"').innerHTML = age + ' Years';
}
}
});
"


Do help.


Regards,

Manthan Shah.

Hi Manthan,

We can't access that link. Where did you add the JS code? On the input you have an onchange or a ajax refresh that refresh the input between first time where is working and second time?

Regards,

Marcelo

Oh man, you might want to simplify this a bit, start using jquery.

For example you can just do:

$('#"+dateofBirthApplicant1.Id+"').change(function(e){
      var d = new Date();
      var x = new Date($(this).val());
      
      // your if checks here
      $('#"+ageContainerApplicant1.Id+"').html('x');
})


See how much simpler this looks?


Also, instead of using javascript you could be using the Outsystems functionality of refreshing an element on the screen with the new data, place an expression on the screen (perhaps with some ifs to present the user with different texts based on the input) and refresh it with an ajax refresh.

Solution

Thanks for the support guys my problem is solved by adding the javascript to the expression and giving extended properties to the input field.

Solution