Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1013
  • Last Modified:

Calling a Javascript function from an input tag

I am attempting to call a function on a text input tag. I have tried everyway I can think of but it never calls the function. If I replace select('single',this.parentNode) with an alert statement it works just fine. Also the select function works fine when called from any other element. Any ideas?
<input id="txt" type="text" onkeydown="if(event.keyCode==9){select('single',this.parentNode)}">
0
mudbuggle
Asked:
mudbuggle
  • 3
  • 3
  • 2
1 Solution
 
HonorGodCommented:
Can you be more specific?
This works just fine.
<html>
<head>
<script type="text/javascript">
 
function doit( text ) {
  alert( 'doit( "' + text + '" )' )
}
</script>
 
</head>
<body>
Something: <input type='text' onchange='doit(this.value)'>
</body>
</html>

Open in new window

0
 
mudbuggleAuthor Commented:
Surely, here is the full code. It will only work in IE.
<html>
<head>
<style type="text/css">
table {
	width : 1000px;
	height : 500px;
}
 
th {
	border : 1px solid;
	background : #D6D6D6;
	text-align : center;
	cursor : pointer;
}
 
td {
	border : 1px solid;
	text-align : center;
	cursor : pointer;
}
 
ul	{
	list-style-type : none;
	border : 1px solid;
	background : #D6D6D6;
	text-decoration : none;
	text-align : center;
	width : 100px;
	position : absolute;
	display : none;
	z-index : 1;
	cursor : pointer;
}
 
li {
	width : 100%;
	height : 100%;
}
 
input {
	text-align : center;
	padding: 18px;
	border : 0px;
	width : 96%;
	height : 96%;
}
 
</style>
<script language="javascript">
 
var previousrow = '';
var previouscol = '';
var previoushead = '';
function select(id,head)
{
		alert('aya');
	if((previouscol != '') && (previoushead != ''))
	{
		var pcolumn = document.getElementsByName(previouscol);
		for(i=0;i<pcolumn.length;i++)
		{
			pcolumn[i].style.backgroundColor = pcolumn[i].style.backgroundColor != '#ededed' ? '#EDEDED' : '';
		}
		if(previouscol == 'single')
		{
			previoushead.style.backgroundColor = previoushead.style.backgroundColor != '#ededed' ? '#EDEDED' : '';
		}
		else
		{
			previoushead.style.backgroundColor = previoushead.style.backgroundColor != '#ededed' ? '#EDEDED' : '#D6D6D6';
		}
	}
 
	if(id != 'single')
	{
		if(previouscol != id)
		{
			var column = document.getElementsByName(id);
			for(i=0;i<column.length;i++)
			{
				column[i].style.backgroundColor = column[i].style.backgroundColor != '#ededed' ? '#EDEDED' : '';
			}
			head.style.backgroundColor = head.style.backgroundColor != '#ededed' ? '#EDEDED' : '#D6D6D6';
			previouscol = id;
			previoushead = head;
		}
		else
		{
			previouscol = '';
			previoushead = '';
		}
	}
	else
	{
		head.style.backgroundColor = head.style.backgroundColor != '#ededed' ? '#EDEDED' : '';
		previouscol = id;
		previoushead = head;
	}
 
}
 
 
 
function rclick() 
{
	if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2)
	{
		var menu = document.getElementById('rightclick');
		menu.style.left = event.clientX + document.body.scrollLeft - 45;
		menu.style.top = event.clientY + document.body.scrollTop -5;
		menu.style.display = 'block';
	}
}
document.onmousedown=rclick
 
function menuhide()
{
	var menu = document.getElementById('rightclick');
	menu.style.display = 'none';
}
 
</script>
</head>
<body oncontextmenu="return false;">
<table>
	<tr id="header"><th>&nbsp;</th><th onclick="select('col1',this)">A</th><th onclick="select('col2',this)">B</th><th onclick="select('col3',this)">C</th><th onclick="select('col4',this)">D</th><th onclick="select('col5',this)">E</th></tr>
	<tr id="1"><th onclick="select('1',this)">1</th><form method="post"><td id="col1" onclick="select('single',this)"><input id="txt" type="text" onkeydown="if(event.keyCode==9){select('single',this.parentNode)}"></td><td id="col2" onclick="select('single',this)"><input type="text" onkeydown="if(event.keyCode==9){'single',this.parentNode}"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></form></tr>
	<tr id="2"><th onclick="select('2',this)">2</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
	<tr id="3"><th onclick="select('3',this)">3</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
	<tr id="4"><th onclick="select('4',this)">4</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
	<tr id="5"><th onclick="select('5',this)">5</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
	<tr id="6"><th onclick="select('6',this)">6</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
	<tr id="7"><th onclick="select('7',this)">7</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text"></td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
	<tr id="8"><th onclick="select('8',this)">8</th><td id="col1" onclick="select('single',this)"><input type="text"></td><td id="col2" onclick="select('single',this)"><input type="text"></td><td id="col3" onclick="select('single',this)"><input type="text">/td><td id="col4" onclick="select('single',this)"><input type="text"></td><td id="col5" onclick="select('single',this)"><input type="text"></td></tr>
</table>
 
<ul id="rightclick" onmouseout="menuhide()" onmouseover="this.parentNode.style.display = 'block';">
	<li onmouseover="this.parentNode.style.display = 'block';">copy</li>
	<li onmouseover="this.parentNode.style.display = 'block';">paste</li>
	<li onmouseover="this.parentNode.style.display = 'block';">save</li>
	<li onmouseover="this.parentNode.style.display = 'block';">delete</li>
</ul>
 
</body>
</html>

Open in new window

0
 
HonorGodCommented:
Can you explain what it is you are trying to do?
I tried it in Chrome, FireFox, and IE, and in each, if I click on a cell I see the "aye" dialog box, and the cell is changed to an input field, and I can type text...

What is it you are trying to do, and what doesn't work?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Michel PlungjanIT ExpertCommented:
try
onfocus="this.parentNode.click()"
0
 
Michel PlungjanIT ExpertCommented:
And add this to make it work in FF too

//Written by Jason Karl Davis

if(typeof HTMLElement!='undefined'&&!HTMLElement.prototype.click)
HTMLElement.prototype.click=function(){
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}


0
 
mudbuggleAuthor Commented:
I need to change the selected cell on a tab event. The following is cathing the tab event.
onkeydown="if(event.keyCode==9){}"
In the case of a tab event it should select the next cell. The alert of "aye" is just to test whether or not the function is being run.
If you change the onkeydown="if(event.keyCode==9){select('single',this.parentNode)}" to onkeydown="if(event.keyCode==9){alert('yay')}", it will work, but for some reason it won't work when attemping to call select function.
0
 
HonorGodCommented:
Thanks for the clarification.

Does Michel's answer help/resolve your issue?
0
 
mudbuggleAuthor Commented:
Rock on mp... Simple and elegant. Thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now