display calendar icon (datepicker) when value is "D"

I am new to programming. I need help to develop a simple javascript function based on the function below. I want to call this function during a page load method while populating field values for search queries on a form. If the value is 'date' (defined as "D"), then I want it to display calendar icon (datepicker) next to the text box field.

The function below works for creating the query. It does display the datepicker and allow user to select the date. However, when I call this function during the FillFormwithSavedQueryField method, it removes the value and does not display the calendar icon as well.

Thanking you in advance.

function showCal(id, index){
try{
index = parseInt(index);
var value = id.value;
var aPosition = value.indexOf("|");
aPosition +=1;
var visible ="visible";
if(value.substring(aPosition,(aPosition +1))=="D") visible ="visible";
else visible ="hidden";
var imgCalender = document.getElementById(pagePrefix +"cal"+ index);
var txtValue = document.getElementById(pagePrefix +"txtValue"+ index);
imgCalender.style.visibility = visible;
txtValue.value ="";
//if the column selected index is 0 then disable the value and condition fields.
if(id.selectedIndex >0){
if((index +1)<= lstFieldsCount){
var lstCondition =null;
if((index +1)== lstFieldsCount) lstCondition = document.getElementById(pagePrefix +"lstCondition"+ index);
else lstCondition = document.getElementById(pagePrefix +"lstCondition"+(index +1));
//lstCondition.selectedIndex = 0;
lstCondition.disabled =false;
Disable(false, index);
}
}
else{
//if the selected criteria is empty then remove all the search conditions below the current conditon.
Disable(true, index);
//loop through the next conditions and disable them
for(j = index +1; j <5; j++){
var lstAllFields = document.getElementById(pagePrefix +"lstAllFields"+ j); lstAllFields.disabled =true;
lstAllFields.selectedIndex =0;
if((index -1)>-1){
var lstCondition = document.getElementById(pagePrefix +"lstCondition"+(index -1));
lstCondition.selectedIndex =0;}Disable(true, j);
}
}
var trNote = document.getElementById("trNote"+ index);
trNote.innerText ='';
var aPosition = value.indexOf("|")+1;
varColumnDataType= value.substring(aPosition,(aPosition +1));
if(ColumnDataType=="D"||ColumnDataType=="T"||ColumnDataType=="B"){
//do not display max length info}elseif(trNote !=null){
if(id.selectedIndex >0){
var allowedLength = value.substring(value.lastIndexOf("|")+1);
trNote.innerText ="Max Length: "+ allowedLength +" Character(s)";
}
}
Operator_Change(index);
}
catch(e){ showMessage(e,true);}

Code (markup):

 

Thank you so much for your help

 

I would suspect most of your problem is the attempt to use innerText, an IE ONLY property -- though really innerText, innerHTML, and textContent all should really be avoided since they are slower and consume more power than the DOM.

I think I'd really have to see the markup this is manipulating and get a better understanding of whatever it is you are trying to do to even come close to helping more than that. I'm not sure, but I get the feeling you are overcomplicating things from the pointless extra variables, extra declarations, etc, etc... You seem to be emptying value but never setting it to anything, playing with innerHTML for who knows what reason, calling values that aren't even SET (lstFieldCount?) much less all the functions we would have no clue what they do like Disable, Operator_change, etc, etc.

Cleaning up the redundancies, switching to DOM manipulation instead of the IE only function, and adding formatting back in (as SarahK suggested) we can strip that down to this:

function showCal(id, index){
	try {
		index = parseInt(index);
		
		var
			d = document,
			value = id.value,
			aPosition = value.indexOf('|') + 1,
			imgCalender = d.getElementById(pagePrefix + 'cal' + index),
			txtValue = d.getElementById(pagePrefix + 'txtValue' + index);
			
		imgCalender.style.visibility = (
			value.substring(aPosition,(aPosition +1))=="D") ?
			'visible' :
			'hidden'
		);
		txtValue.value = '';
		
		if (id.selectedIndex > 0) {
			// if the column selected index is 0 then disable the value and condition fields.
			if ((index +1)<= lstFieldsCount) {
				var lstCondition = d.getElementById(
					pagePrefix + 'lstCondition' + (index + (
						(index +1) == lstFieldsCount ? 0 : 1
					))
				);
				// lstCondition.selectedIndex = 0;
				lstCondition.disabled = false;
				Disable(false, index);
			}
		} else {
			// if the selected criteria is empty then remove all the search conditions below the current conditon.
			Disable(true, index);
			// loop through the next conditions and disable them
			for (j = index + 1; j <5; j++) {
				var
					lstAllFields = d.getElementById(pagePrefix + 'lstAllFields' + j);
				lstAllFields.disabled = true;
				lstAllFields.selectedIndex = 0;
				if ((index -1) >= 0) {
					var
						lstCondition = d.getElementById(pagePrefix + 'lstCondition' + (index - 1));
					lstCondition.selectedIndex = 0;
				}
				Disable(true, j);
			}
		}
		
		var
			trNote = document.getElementById("trNote"+ index);
			aPosition = value.indexOf('|') + 1,
			varColumnDataType = value.substring(aPosition, (aPosition + 1));
			
		// erase all child nodes
		while (trNote.firstChild) trNote.removeChild(trNote.firstChild);
		
		if ((
			ColumnDataType == 'D' ||
			ColumnDataType == 'T' ||
			ColumnDataType == 'B'
		) && id.selectedIndex > 0 ) {
			trNote.appendChild(d.createTextNode(
				'Max Length: ' +
				value.substring(value.lastIndexOf('|') + 1) +
				'Character(s)'
			));
		}
	}
	
	Operator_Change(index);
	
} catch(e) {
	showMessage(e,true);
}

Code (markup):

Though without seeing what's being manipulated or fully grasping what it is you are even trying to do, that's about as far as I can go with it. Generally if I had that much scripting dicking around with values on a page, I'd scrap the entire concept since scripting should enhance functionality, not supplant it. Unless this is a HTML crApplet, you're doing things that IMHO have no business on a website in the first place.

 

I appreciate the response. You are right about this code being written with lot of imperfection. That's what happens when too many people work on the same piece of code. But I will go ahead and try to implement what you have suggested. My goal is very simple. I want to validate 5 text field values and if they are date values then make the datepicker visible. Perhaps the above function is being used for some other functionality as well. I am wondering if I even need to use javascript to to do what I am trying to accomplish. I will revert back soon. Thank you again for taking time to make suggestions.

 

Being nice isn't that hard is it? I actually like reading your posts when you aren't screaming they are informative and helpful.

BTW, sorry for off-topic post.

 

Thank you for your comments. It's is always good to get feedback. Since I am new to this forum, can you suggest how to delete a post/thread if you do not wish to pursue the resolution for it? Also, is there a way to modify the original question/code if you need to?