By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,825 Members | 1,026 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,825 IT Pros & Developers. It's quick & easy.

Javascript: set an onChange function by javascript, not embedded.

P: 3
I have an HTML file that includes a JavaScript. I would like this JavaScript to be able to create an "onChange=<function>" attribute against the password element.

Here is an example page of the onChange embedded in the "password" field. This is normal HTML and it works fine.
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD><TITLE> Example of onChange Event Handler </TITLE>
  3.  
  4. </HEAD>
  5. <BODY BGCOLOR="FFFFFF" TEXT="000000">
  6. <H3>Example of onChange Event Handler</H3>
  7. <form method="post">
  8.     Name: <input type="text" name="name" size=10><br>
  9.     Pass: <input type="password" name="password" size=10 onChange='alert("It WORKED!")'><br>
  10. <input type="submit" name="submit" size=10 >
  11. </form>
  12. <P>
  13. </BODY>
  14. </HTML>
However, I would like to be able to add the "onChange" method by JavaScript. This way I can dynamically change the method being used. Here is my attempt at getting it to work. This does not work but shows what I am trying to do.

Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD><TITLE> Example of onChange Event Handler </TITLE>
  3.  
  4. <SCRIPT LANGUAGE="JavaScript">
  5. document.forms[0].elements[1].onChange='alert("It WORKED!")';
  6. </SCRIPT>
  7.  
  8. </HEAD>
  9. <BODY BGCOLOR="FFFFFF" TEXT="000000">
  10. <H3>Example of onChange Event Handler</H3>
  11. <form method="post">
  12.     Name: <input type="text" name="name" size=10><br>
  13.     Pass: <input type="password" name="password" size=10 ><br>
  14. <input type="submit" name="submit" size=10 >
  15. </form>
  16. <P>
  17. </BODY>
  18. </HTML>
  19.  
Jun 6 '07 #1
Share this Question
Share on Google+
4 Replies


10K+
P: 13,264
I have an HTML file that includes a JavaScript. I would like this JavaScript to be able to create an "onChange=<function>" attribute against the password element.

Here is an example page of the onChange embedded in the "password" field. This is normal HTML and it works fine.
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD><TITLE> Example of onChange Event Handler </TITLE>
  3.  
  4. </HEAD>
  5. <BODY BGCOLOR="FFFFFF" TEXT="000000">
  6. <H3>Example of onChange Event Handler</H3>
  7. <form method="post">
  8.     Name: <input type="text" name="name" size=10><br>
  9.     Pass: <input type="password" name="password" size=10 onChange='alert("It WORKED!")'><br>
  10. <input type="submit" name="submit" size=10 >
  11. </form>
  12. <P>
  13. </BODY>
  14. </HTML>
However, I would like to be able to add the "onChange" method by JavaScript. This way I can dynamically change the method being used. Here is my attempt at getting it to work. This does not work but shows what I am trying to do.

Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD><TITLE> Example of onChange Event Handler </TITLE>
  3.  
  4. <SCRIPT LANGUAGE="JavaScript">
  5. document.forms[0].elements[1].onChange='alert("It WORKED!")';
  6. </SCRIPT>
  7.  
  8. </HEAD>
  9. <BODY BGCOLOR="FFFFFF" TEXT="000000">
  10. <H3>Example of onChange Event Handler</H3>
  11. <form method="post">
  12.     Name: <input type="text" name="name" size=10><br>
  13.     Pass: <input type="password" name="password" size=10 ><br>
  14. <input type="submit" name="submit" size=10 >
  15. </form>
  16. <P>
  17. </BODY>
  18. </HTML>
  19.  
Put the code in a function and call that function onChange of the password box.
Jun 6 '07 #2

dmjpro
100+
P: 2,476
Welcome to TSDN.

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT LANGUAGE="JavaScript">
  2. //document.forms[0].elements[1].onChange='alert("It WORKED!")';
  3. //Here the function reference requires not the string.
  4. //Edit the line like this .....
  5. document.forms[0].elements[1].onChange=function(){alert("It WORKED!")};
  6. </SCRIPT>
  7.  
Now see the effect.
Have a good day.

Kind regards,
Dmjpro.
Jun 6 '07 #3

P: 3
Welcome to TSDN.

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT LANGUAGE="JavaScript">
  2. //document.forms[0].elements[1].onChange='alert("It WORKED!")';
  3. //Here the function reference requires not the string.
  4. //Edit the line like this .....
  5. document.forms[0].elements[1].onChange=function(){alert("It WORKED!")};
  6. </SCRIPT>
  7.  
Now see the effect.
Have a good day.

Kind regards,
Dmjpro.
Thanks for the reply. However, this does not work either.
Jun 6 '07 #4

P: 3
Thanks for the reply. However, this does not work either.
I found the problem. Your example DOES work, but not if the <SCRIPT> is in the <HEAD>. I believe what happens is that this function is loaded prior to the elements existing.

I moved this snippet to the BOTTOM of the file; after the </HTML> and it worked. Likely because the elements finally do exist so the onChange assignment acutally gets set.

Thanks!

- Matt
Jun 6 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.