Hi,
I have a requirement that I developed the front end page on HTML Composer, it has a combo box that has values MONTH, YTD,R12, when Month selected 2 Calendars will be displayed to select start and end dates but when R12 selected these Calendars should be hide mode, I achieved this functionality using on change event as bellow, but my issue is when I go back to MONTH, Calendars are not appearing back, can some one tell me where I`m doing wrong

  
//Begin function combobox1_onchange
function combobox1_onchange(ctrl) {

	var combobox1 = document.getElementById("combobox1"); 
	var dropdown_value = combobox1_onchange.value; 

	var calendar1 = document.getElementById("calendar1"); 
	var calendar2 = document.getElementById("calendar2"); 

	IbComposer_showHtmlElement("text1", false);
	IbComposer_showHtmlElement("text8", false);
	IbComposer_showHtmlElement("calendar1", false);
	IbComposer_showHtmlElement("calendar2", false);

	if(dropdown_value == "MON"){
		//showing the appropriate elements
		IbComposer_showHtmlElement("text1", true);
		IbComposer_showHtmlElement("text2", true);
      IbComposer_showHtmlElement("calendar1", true);
      IbComposer_showHtmlElement("calendar2", true);
	}else if (dropdown_value == "R12"){
		//showing the appropriate elements
		IbComposer_showHtmlElement("text1", false);
		IbComposer_showHtmlElement("text2", false);
      IbComposer_showHtmlElement("calendar1", false);
      IbComposer_showHtmlElement("calendar2", false);
	}else if (dropdown_value == "YTD"){
		//showing the appropriate elements
		IbComposer_showHtmlElement("text1", false);
		IbComposer_showHtmlElement("text2", false);
      IbComposer_showHtmlElement("calendar1", false);
      IbComposer_showHtmlElement("calendar2", false);
	}
}
//End function combobox1_onchange

This message has been edited. Last edited by: FP Mod Chuck,

Don't you need the if statement to look for "MONTH" not "MON"?

Also, the variable dropdown_value should equal combobox1.value;

Try the code below:

  
//Begin function combobox1_onchange
function combobox1_onchange(ctrl) {
    var combobox1 = document.getElementById("combobox1");
    //var dropdown_value = combobox1_onchange.value;
    var dropdown_value = combobox1.value;

    var calendar1 = document.getElementById("calendar1");
    var calendar2 = document.getElementById("calendar2");

    IbComposer_showHtmlElement("text1", false);
    IbComposer_showHtmlElement("text8", false);
    IbComposer_showHtmlElement("calendar1", false);
    IbComposer_showHtmlElement("calendar2", false);

    //if (dropdown_value == "MON") {
    if (dropdown_value == "MONTH") {
        //showing the appropriate elements
        IbComposer_showHtmlElement("text1", true);
        IbComposer_showHtmlElement("text2", true);
        IbComposer_showHtmlElement("calendar1", true);
        IbComposer_showHtmlElement("calendar2", true);
    } else if (dropdown_value == "R12") {
        //showing the appropriate elements
        IbComposer_showHtmlElement("text1", false);
        IbComposer_showHtmlElement("text2", false);
        IbComposer_showHtmlElement("calendar1", false);
        IbComposer_showHtmlElement("calendar2", false);
    } else if (dropdown_value == "YTD") {
        //showing the appropriate elements
        IbComposer_showHtmlElement("text1", false);
        IbComposer_showHtmlElement("text2", false);
        IbComposer_showHtmlElement("calendar1", false);
        IbComposer_showHtmlElement("calendar2", false);
    }
}
//End function combobox1_onchange

This message has been edited. Last edited by: Hallway,

Or simplified since you already hide the controls/elements that you don't want to be displayed by default you only need to test the condition to show them.
And as Hallway pointed out, you need to test the proper value.

//Begin function combobox1_onchange
function combobox1_onchange(ctrl) {
//showing the appropriate elements
    IbComposer_showHtmlElement("text1", false);
    IbComposer_showHtmlElement("text8", false);
    IbComposer_showHtmlElement("calendar1", false);
    IbComposer_showHtmlElement("calendar2", false);

    if (combobox1.value == "MONTH") {
        IbComposer_showHtmlElement("text1", true);
        IbComposer_showHtmlElement("text2", true);
        IbComposer_showHtmlElement("calendar1", true);
        IbComposer_showHtmlElement("calendar2", true);
    }
}
//End function combobox1_onchange

This message has been edited. Last edited by: MartinY,

Even shorter:

function combobox1_onchange(ctrl) {
    // I think the assignment of combobox1 got lost in Martin's example, but ctrl should be a usable reference for the same.
    var show = (ctrl.value == "MONTH");

    IbComposer_showHtmlElement("text1", show);
    IbComposer_showHtmlElement("text8", show);
    IbComposer_showHtmlElement("calendar1", show);
    IbComposer_showHtmlElement("calendar2", show);
}

Thank you Hallway,

it worked halfway when I changed to combobox1.value, calendar box is hiding but not calendar icon, icon is still visible when I select R12 or YTD, is their any way I can hide the calendar icon also.

Thanks,
Krishna

Something that I had to used to show/hide the calendar image, but can't remember with which version of WF (probably an early version of WF8) and doesn't seems to be anymore an issue with at least v8201M

// This function is to hide the calendar icon which is not hidden when hiding the calendar control
function hideCalendarIcon() {
	//get all images on the page into array
	images=document.getElementsByTagName("img");
	//get the number of images in array
	numImages = images.length;
	
	//Loop through images and see if it is a dynCalendar
	for (i=0;i<numImages;++i) {
  		if (images[i].src.indexOf("dynCalendar.gif")>0){
		//If it is, hide
   			images[i].style.visibility='hidden';
		}
	}
}

// This function is to show the calendar icon
function showCalendarIcon() {
	//get all images on the page into array
	images=document.getElementsByTagName("img");
	//get the number of images in array
	numImages = images.length;
	
	//Loop through images and see if it is a dynCalendar
	for (i=0;i<numImages;++i) {
  		if (images[i].src.indexOf("dynCalendar.gif")>0){
		//If it is, show
   			images[i].style.visibility='visible';
		}
	}
}

Wep