Solved

Calling a Javascript function from an input tag

Posted on 2009-05-11
8
983 Views
Last Modified: 2012-06-27
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
Comment
Question by:mudbuggle
  • 3
  • 3
  • 2
8 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24353887
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
 
LVL 6

Author Comment

by:mudbuggle
ID: 24353913
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24353996
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 24354062
try
onfocus="this.parentNode.click()"
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24354095
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
 
LVL 6

Author Comment

by:mudbuggle
ID: 24354113
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24354140
Thanks for the clarification.

Does Michel's answer help/resolve your issue?
0
 
LVL 6

Author Closing Comment

by:mudbuggle
ID: 31580113
Rock on mp... Simple and elegant. Thanks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now