help with simple code

**p2xt** · 04-04-2010 08:23 PM

i have this form:

HTML Code:

<form method="post" action="user_add.php" id="add_user">
	username:
	<br />
	<input type="text" id="username" value="">
	<br />
	password:
	<br />
	<input type="password" id="password" value="">
	<br />
	<input type="submit" id="submit" value="submit">
	<input type="reset" value="cancel">
</form>

this javascript code:

Code:

document.getElementById('username').onfocus = alert("test");

now this should alert when i click on username tab... but nothing happens

**tirna** · 04-04-2010 08:35 PM

when you say this should alert, I don't see in your code what actually triggers the code

Code:

document.getElementById('username').onfocus = alert("test");

to execute.

Where have you got the javascript code located in your file and where are you actually calling it.

As posted, I wouldn't expect the alert to fire.

**p2xt** · 04-04-2010 08:43 PM

onfocus shouldn`t trigger ?
the code is on a external file

Code:

<script type="text/javascript" src="validate.js"></script>

and that file contains only this line.

Code:

document.getElementById('username').onfocus = alert("test");

i`ve just started learning javascript and this is very strange to me now

**tirna** · 04-04-2010 08:52 PM

ok, onfocus is an event you can assign to most elements.

Maybe try something like this:

Code:

 
<input type="text" id="username" value="" onfocus="alert('test');"  />

Then every time you click on the username textbox the alert() will fire.

Or if you prefer to put the javascript in a function you could do this:

Code:

 
<input type="text" id="username" value="" onfocus="call_a_function();"  />

and then either within internal <script type="text/javascript"> or an external JS file you could have

Code:

 
function call_a_function() {
    alert("test");
}

**p2xt** · 04-05-2010 03:33 AM

that works... the thing is that form is much bigger and is generated by php and for that i must make the change in php witch is not a very good option for me

**criterion9** · 04-05-2010 07:47 AM

You can assign an event dynamically without the need to alter the html code at all. In your case you could either:

Code:

someElement.onFocus = Function(){Alert("Test");};

Or

Code:

function myAlert(){
   Alert("Test");
}
someElement.onFocus = myAlert;

**p2xt** · 04-05-2010 11:47 AM

1st ty for reply,
but still no luck... am i doing smt wrong ?

HTML Code:

<html>
<head>
	<title>Basic</title>
<script>
function myAlert(){
   Alert("Test");
}
someElement('username').onFocus = myAlert;
</script>
</head>
<body>
<form method="post" action="user_add.php" id="add_user">
	username:
	<br />
	<input type="text" id="username" value="">
	<br />
	password:
	<br />
	<input type="password" id="password" value="">
	<br />
	<input type="submit" id="submit" value="submit">
	<input type="reset" value="cancel">
</form>
</body>
</html>

**criterion9** · 04-05-2010 12:06 PM

Your event handler has to be added after the element has been loaded. This either means to move your event attachment below the html code or wait for the DOM to be loaded:

Code:

<html>
<head>
	<title>Basic</title>
</head>
<body>
<form method="post" action="user_add.php" id="add_user">
	username:
	<br />
	<input type="text" id="username" value="">
	<br />
	password:
	<br />
	<input type="password" id="password" value="">
	<br />
	<input type="submit" id="submit" value="submit">
	<input type="reset" value="cancel">
</form>
<script type="text/javascript">
function myAlert(){
   Alert("Test");
}
document.getElementById('username').onFocus = myAlert;
</script>
</body>
</html>

**p2xt** · 04-05-2010 04:23 PM

unbelievable still doesn't work opened it with ie opera and firefox latest vers

**p2xt** · 04-06-2010 08:15 AM

cmon there must be someone who can tell me how to use onfocus without altering html code

**Fang** · 04-06-2010 10:05 AM

JavaScript is case sensitive:

Code:

function myAlert(){
   alert("Test");
}
document.getElementById('username').onfocus = myAlert;

**p2xt** · 04-06-2010 04:47 PM

i try`ed this already and no success does this work for you?

**criterion9** · 04-06-2010 06:42 PM

Originally Posted by Fang

JavaScript is case sensitive:

Code:

function myAlert(){
   alert("Test");
}
document.getElementById('username').onfocus = myAlert;

Oops, my bad. I was copy-and-paste happy.

**Fang** · 04-07-2010 05:36 AM

Originally Posted by p2xt

i try`ed this already and no success does this work for you?

Yes

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form method="post" action="user_add.php" id="add_user">
<div>	username:
	<br>
	<input type="text" id="username" value="">
	<br>
	password:
	<br>
	<input type="password" id="password" value="">
	<br>
	<input type="submit" id="submit" value="submit">
	<input type="reset" value="cancel">
</div>
</form>
<script type="text/javascript">
function myAlert(){
   alert("Test");
}
document.getElementById('username').onfocus = myAlert;
</script>
</body>
</html>

**p2xt** · 04-07-2010 06:18 AM

mate ty for your time, it does really work but if i wanna use it in a external file?
moving the

Code:

<script type="text/javascript" src="script1.js"></script>

does not work

Thread: help with simple code

Thread Tools

Display

help with simple code

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions