473,657 Members | 2,504 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

3 New Member
I have an HTML file that includes a JavaScript. I would like this JavaScript to be able to create an "onChange=<func tion>" 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
4 47970
r035198x
13,262 MVP
I have an HTML file that includes a JavaScript. I would like this JavaScript to be able to create an "onChange=<func tion>" 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
2,476 Top Contributor
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
auslandt
3 New Member
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
auslandt
3 New Member
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

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

Similar topics

72
5188
by: Stephen Poley | last post by:
I have quite often (as have probably many of you) come across HTML forms with irritating bits of Javascript attached. The last straw on this particular camel's back was a large form I was asked to complete in connection with attendance at a seminar. After spending more than 15 minutes on it, I clicked on the submit button - and nothing happened. Looking round the pages on Javascript form validation that Google produced for me (well,...
4
11944
by: rick | last post by:
The following basic script works fine in firefox by not in IE. Can anyone spot the problem? In IE I can only delete the first line but not the lines created by javascript. Also, look at the HTML code for the first line (click the Table HTML button:)) you will fine that the code displayed is not the same as was written. "onChange" was changed to "onchange" etc. Please help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">...
14
3301
by: horos | last post by:
hey all, I'm a heavy perl user, not so much a java script user, and was wondering... perl has an extremely nice utility called Data::Dumper, which allows you to dump out the contents of an arbitrary data structure. I'd like to do the same with javascript. print Data::Dumper(document)
9
2164
by: beguigne | last post by:
Below is a snippet of a crude date picking routine for a form. I am a novice at this so, I am hitting my head at why when I select the day, the onChange event gives me a blank. What am I missing? Regards, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
4
1830
by: roger31 | last post by:
Hello - i have created a simple composite control with drop down list displaying the US States. I have also a Javascript (County.js) file embedded inside the control. The Javascript file has an array of County Names. IN another Javascript i have a function that will display a list of county names for the selected state. I am using the following to register the javascript rstype = resource type; rsname = fully qualified resource name...
13
18677
by: monomaniac21 | last post by:
hi i want to be able to trigger a javascript style popup alert in php (i want a message displayed on the actual page) is this possible?
5
13200
by: rocknbil | last post by:
Hello everyone! I'm new here but have been programming for the web in various languages for 15 years or so. I'm certainly no "expert" but can keep myself out of trouble (or in it?) most of the time. This particular problem has plagued me for years; it is making me very, very, old. :-( It deals with the way Javascript's method of floating point precision takes the simplest math calculations and steals a penny - in the example below, a simple...
4
2382
by: mantrid | last post by:
Can anyone see why the checkbox in the code below doesnt get ticked when the textbox is changed ***This javascript function is called in the textbox's onchange event to check it when it is changed***** <script type="text/JavaScript"> function changed(x){ document.getElementById(x).checked=true;
6
8639
by: James007 | last post by:
Hi everyone, I am developing a web page for an embedded application. I created a text box for entering a value (only 1 byte long). The onchange event triggers correctly when I enter the value from a keyboard and press enter. However, it doesn't seem to fire when a javacript (a slider in this case) modifies the text box's value. I have tried: document.getElementById("sd1").fireEvent("onchange"); and,...
0
8421
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8325
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8844
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8621
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6177
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5643
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4173
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4330
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
1734
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.