Thread: edit one at a time

hi
i have dynamically created edit button used to edit a single coulmn in list.
when click on edit button the column which has to be edit become editable textbox.
what i want to do is at time only one editable text box should display.other texbozes if they are then should hide.

Code:

function fnToggle(vlCounter)
{
		
frm =  window.document.frmProtocolSettings 	
		
		for ( var f = 0; f < frm.elements.length; ++f ) 
		{ 
			// get one field 
		
			var fld = frm.elements[f]; 			
			// see if it is one of our txtbox fields 
			if ( fld.name.substring(0,10) == "txtBoxRow_" ) 
			{ 
				 fld.style.display = "none"; 
				 
			} 
	   } 
	    document.getElementById("txtRow_" + vlCounter ).style.display = "none";
		document.getElementById("txtBoxRow_" + vlCounter ).style.display = "";
		document.getElementById("RowEdit_" + vlCounter ).style.display = "none";
		document.getElementById("RowSave_" + vlCounter ).style.display = "";
		document.getElementById("RowCancel_" + vlCounter ).style.display = "";
}

this is the function called on each click on edit button.

hi txtBoxRow is my span id.i want to show and hide this span id .

If I understand you correctly, you have a few rows of data. You click one row, but then decide to click another row to edit. When doing this, you want the previous row to hid the textboxes, correct?

If so, get the total count of your rows. Then, in your function, perform a For Loop to iterate through the fields and set the display:none; property. Be sure to have a clause in there so that when the counter reaches the row you want to leave editable, it will skip over it.

JMH same logic i was trying but problem is in same function i m making text box display inline.see my function u will get idea

Code:

function fnToggle(vlCounter)
{	
		var i;
		document.getElementById("txtRow_" + vlCounter ).style.display = "none";
		document.getElementById("txtBoxRow_" + vlCounter ).style.display = "";		
		document.getElementById("RowEdit_" + vlCounter ).style.display = "none";
		document.getElementById("RowSave_" + vlCounter ).style.display = "";
		document.getElementById("RowCancel_" + vlCounter ).style.display = "";
		for(i=0;i<=document.getElementById("HTotalCount").value;i++)
		{
			if(i != vlCounter )
			{
				//document.getElementById("txtBoxRow_" + i ).style.display = "none";
			}
		}
		
		
}

see the bold line in function here i m creating or displaying my span tag. and when i trying to use this span in my loop as said by u showing me object expected javascript error.
meant my loop not getting that span which is just above the loop has been displayed.how can i get that span.

hope it make some sense.

Thanks for your time.

sorry gotted now this way
eval(document.getElementById("txtBoxRow_" + i )).style.display = "none";

its my mistake thanks a lot.