OnChange not firing in IE11

Posted by bulletproof on Stack Overflow See other posts from Stack Overflow or by bulletproof
Published on 2014-06-03T14:07:33Z Indexed on 2014/06/12 3:26 UTC
Read the original article Hit count: 321

The date picker we use is created in a javascript library. It has a dropdown for the month and year and when these change it fires an onChange event to run a function that refreshes the dates displayed. Below is the function that creates the calendar.

function makeCalendar(intWhatMonth,intWhatYear,bViewOnly) {
    if (bViewOnly) {intWhatMonth-=1;}
    var strOutput = '';
    var intStartMonth=intWhatMonth;
    var intStartYear=intWhatYear;
    var intLoop;
    var strTemp='';
    var strDateColWidth;    

    dteCur.setMonth(intWhatMonth);
    dteCur.setFullYear(intWhatYear);
    dteCur.setDate(dteToday.getDate());
    dteCur.setHours(0);dteCur.setMinutes(0);dteCur.setSeconds(0);dteCur.setMilliseconds(0);
    if (!(bViewOnly)) {
        strTemp='<form name="spiffyCal">';
    }
    // special case for form not to be inside table in Netscape 6
    if (scNN6) {
        strOutput += strTemp +'<table width="210" border="3" class="cal-Table" cellspacing="0" cellpadding="0"><tr>';
    }
    else {
        strOutput += '<table width="210" border="3" class="cal-Table" cellspacing="0" cellpadding="0">'+strTemp+'<tr>';
    }

    if (!(bViewOnly)) {
        strOutput += '<td class="cal-HeadCell" align="center" width="100%"><a href="javascript:'+this.varName+'.clearDay();"><img name="calbtn1" src="'+strDefBtnImgPath+'btn_del_small.gif" border="0" width="12" height="10"></a>&nbsp;&nbsp;<a href="javascript:'+this.varName+'.scrollMonth(-1);" class="cal-DayLink">&lt;</a>&nbsp;<SELECT class="cal-ComboBox" id="cboMonth" NAME="cboMonth" onChange="'+this.varName+'.changeMonth();">';


        for (intLoop=0; intLoop<12; intLoop++) {
            if (intLoop == intWhatMonth) strOutput += '<OPTION VALUE="' + intLoop + '" SELECTED>' + msNames[intLoop] + '<\/OPTION>';
            else  strOutput += '<OPTION VALUE="' + intLoop + '">' + msNames[intLoop] + '<\/OPTION>';
        }


        strOutput += '<\/SELECT><SELECT class="cal-ComboBox" id="cboYear" NAME="cboYear" onChange="'+this.varName+'.changeYear();">';

        for (intLoop=this.minYearChoice; intLoop<this.maxYearChoice; intLoop++) {
            if (intLoop == intWhatYear) strOutput += '<OPTION VALUE="' + intLoop + '" SELECTED>' + intLoop + '<\/OPTION>';
            else strOutput += '<OPTION VALUE="' + intLoop + '">' + intLoop + '<\/OPTION>';
        }

        strOutput += '<\/SELECT>&nbsp;<a href="javascript:'+this.varName+'.scrollMonth(1);" class="cal-DayLink">&gt;</a>&nbsp;&nbsp;<a href="javascript:'+this.varName+'.hide();"><img name="calbtn2" src="'+strDefBtnImgPath+'btn_close_small.gif" border="0" width="12" height="10"></a><\/td><\/tr><tr><td width="100%" align="center">';
    }
    else {
        strOutput += '<td class="cal-HeadCell" align="center" width="100%">'+msNames[intWhatMonth]+'-'+intWhatYear+'<\/td><\/tr><tr><td width="100%" align="center">';      
    }


    firstDay = new Date(intWhatYear,intWhatMonth,1);
    startDay = firstDay.getDay();

    if (((intWhatYear % 4 == 0) && (intWhatYear % 100 != 0)) || (intWhatYear % 400 == 0))
        msDays[1] = 29;
    else
        msDays[1] = 28;

    strOutput += '<table width="210" cellspacing="1" cellpadding="2" border="1"><tr>';

    for (intLoop=0; intLoop<7; intLoop++) {
        if (intLoop==0 || intLoop==6) {
            strDateColWidth="15%"
        }
        else
        {
            strDateColWidth="14%"
        }
        strOutput += '<td class="cal-HeadCell" width="' + strDateColWidth + '" align="center" valign="middle">'+ msDOW[intLoop] +'<\/td>';
    }

    strOutput += '<\/tr><tr>';

    var intColumn = 0;
    var intLastMonth = intWhatMonth - 1;
    var intLastYear = intWhatYear;

    if (intLastMonth == -1) { intLastMonth = 11; intLastYear=intLastYear-1;}

    for (intLoop=0; intLoop<startDay; intLoop++, intColumn++) {
        strOutput += this.getDayLink(true,(msDays[intLastMonth]-startDay+intLoop+1),intLastMonth,intLastYear,bViewOnly);
    }

    for (intLoop=1; intLoop<=msDays[intWhatMonth]; intLoop++, intColumn++) {
        strOutput += this.getDayLink(false,intLoop,intWhatMonth,intWhatYear,bViewOnly);
        if (intColumn == 6) {
            strOutput += '<\/tr><tr>';
            intColumn = -1;
        }
    }

    var intNextMonth = intWhatMonth+1;
    var intNextYear = intWhatYear;

    if (intNextMonth==12) { intNextMonth=0; intNextYear=intNextYear+1;}

    if (intColumn > 0) {
        for (intLoop=1; intColumn<7; intLoop++, intColumn++) {
            strOutput +=  this.getDayLink(true,intLoop,intNextMonth,intNextYear,bViewOnly);
        }
        strOutput += '<\/tr><\/table><\/td><\/tr>';
    }
    else {
        strOutput = strOutput.substr(0,strOutput.length-4); // remove the <tr> from the end if there's no last row
        strOutput += '<\/table><\/td><\/tr>';
    }

    if (scNN6) {
        strOutput += '<\/table><\/form>';
    }
    else {
        strOutput += '<\/form><\/table>';
    }
    dteCur.setDate(1);
    dteCur.setHours(0);dteCur.setMinutes(0);dteCur.setSeconds(0);dteCur.setMilliseconds(0);

    dteCur.setMonth(intStartMonth);
    dteCur.setFullYear(intStartYear);

    return strOutput;
}   
this.makeCalendar=makeCalendar;

We have recently upgraded to IE11 and it is not firing this event anymore. I've tested this in an earlier version of IE and also in Chrome and it works as expected. The functions called from the anchor tags are working as expected.

Creating a dropdown with an onChange event in html works in IE11.

Has anyone come across anything like this in IE11?

I have checked the console and it is showing no errors.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html