Page 1 of 1

Fire Events or Functions When Text Box Gets Focus

Posted: Wed Apr 28, 2010 1:26 pm
by devarishi
On my PHP Page I have this JavaScript to add a New Row to a Table and inser Text Box in the cells:

(only part of the function is given here as it is the most relevent code snippet for our discussion of the stated problem)

Code: Select all

		var newCell2 = newRow.insertCell(2);
		var el = document.createElement('input');
		el.type = 'text';
		el.name = 'rec[]';
		el.id = 'txtRow' + iteration;
		el.size = 20;
		newCell2.appendChild(el);

When the function containing the above piece of codes is called (onClick event of a button), it addes a row and inserts a Text Box in the 3rd cell.

Here, I want to be able to pop-up a Calander when we click on the text box or the text box gets focus set on it (as by Tab).

I tested whether I could use any function by using these two events:

Code: Select all

		el.onClick = alert("Hello!");
		el.onChange = alert("Hello!");
The Aler Box does pop-up but only when we click the "Add" button on the form to add a New Row. When click in the Text Box or press the Tab key to set focus on it, nothing happens.

If we can fire the alert() function as we want here, then we can call a function to show a calander too.


Any suggestions?

Re: Fire Events or Functions When Text Box Gets Focus

Posted: Wed Apr 28, 2010 3:43 pm
by kaszu
There is an event onfocus, you must bind to that.

Code: Select all

el.onfocus = function () {
    alert("Hello!");
};
Also

Code: Select all

el.onChange = alert("Hello!");
will not show alert box when input value changes, because you call alert, which returns nothing and nothing is assigned as event handler for onchange. So acctualy that's the same as

Code: Select all

alert("Hello!");
el.onChange = undefined;
This will be useful for you: viewtopic.php?f=13&t=44361

Re: Fire Events or Functions When Text Box Gets Focus

Posted: Wed Apr 28, 2010 5:41 pm
by devarishi
el.onfocus = function () {
alert("Hello!");
};

Thanks for that!

Well, I present one more problem here. I have a "Remove Row" button which is also dynamically crated along with a row and the a text box in the first cell.

When we click this button I want the associate function to delete that row in which the button is placed. So, if we have 5 tows, we have 1 Text Box and 1 Button placed in each row. The problem that I am now facing is how to determine that current row position so that we can delete it?

Code: Select all

  var newCell2 = newRow.insertCell(2);
  var el = document.createElement('button');
  el.name = 'MID[]';
  el.id = 'txtRow' + iteration;
  el.size = 20;
  el.value = 'Delete Tape';
  newCell2.appendChild(el);
  el.onfocus = function deleteRow() {

	var tbl = document.getElementById('tblInsertRow');
		alert(tbl.tBodies[0].rows.length);
	};

This line needs to be replaced with the piece of code we need to identify the Current Row:

Code: Select all

alert(tbl.tBodies[0].rows.length);
Clicking the button should delete the current row only. I tried this piece of code:

Code: Select all

tbl.tBodies[0].deleteRow(el.id); 
But it is deleting the Top Row. Quite strange!

Re: Fire Events or Functions When Text Box Gets Focus

Posted: Thu Apr 29, 2010 11:32 am
by kaszu

Code: Select all

el.onclick = function () {  //CLICK!!! not FOCUS
    alert(this);    //Alerts [object HTMLButtonElement]
}
In that context "this" refers to button which was clicked. You can take "this" and traverse up the tree to TR element using el.parentNode and checking el.tagName until you find 'TR', that will be row in which button was clicked.
When you have found TR you can use following to remove the row

Code: Select all

el.parentNode.removeChild(el);
Please read:
JS Events
Event list
"this" keyword
DOM traversing