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

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • auslandt
    New Member
    • Jun 2007
    • 3
    #1

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

    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.
    Code:
    <HTML>
<HEAD><TITLE> Example of onChange Event Handler </TITLE>

</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3>Example of onChange Event Handler</H3>
<form method="post">
	Name: <input type="text" name="name" size=10><br>
	Pass: <input type="password" name="password" size=10 onChange='alert("It WORKED!")'><br>
<input type="submit" name="submit" size=10 >
</form>
<P>
</BODY>
</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.

    Code:
    <HTML>
<HEAD><TITLE> Example of onChange Event Handler </TITLE>

<SCRIPT LANGUAGE="JavaScript">
document.forms[0].elements[1].onChange='alert("It WORKED!")';
</SCRIPT>

</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3>Example of onChange Event Handler</H3>
<form method="post">
	Name: <input type="text" name="name" size=10><br>
	Pass: <input type="password" name="password" size=10 ><br>
<input type="submit" name="submit" size=10 >
</form>
<P>
</BODY>
</HTML>
    Tags: javacript onchange, javascript onchange, onchange javascript
    • r035198x
      MVP
      • Sep 2006
      • 13225
      #2
      Originally posted by auslandt
      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.
      Code:
      <HTML>
<HEAD><TITLE> Example of onChange Event Handler </TITLE>
 
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3>Example of onChange Event Handler</H3>
<form method="post">
	Name: <input type="text" name="name" size=10><br>
	Pass: <input type="password" name="password" size=10 onChange='alert("It WORKED!")'><br>
<input type="submit" name="submit" size=10 >
</form>
<P>
</BODY>
</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.

      Code:
      <HTML>
<HEAD><TITLE> Example of onChange Event Handler </TITLE>
 
<SCRIPT LANGUAGE="JavaScript">
document.forms[0].elements[1].onChange='alert("It WORKED!")';
</SCRIPT>
 
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3>Example of onChange Event Handler</H3>
<form method="post">
	Name: <input type="text" name="name" size=10><br>
	Pass: <input type="password" name="password" size=10 ><br>
<input type="submit" name="submit" size=10 >
</form>
<P>
</BODY>
</HTML>
      Put the code in a function and call that function onChange of the password box.

        Comment

        • dmjpro
          Top Contributor
          • Jan 2007
          • 2476
          #3
          Welcome to TSDN.

          [code=javascript]
          <SCRIPT LANGUAGE="JavaS cript">
          //document.forms[0].elements[1].onChange='aler t("It WORKED!")';
          //Here the function reference requires not the string.
          //Edit the line like this .....
          document.forms[0].elements[1].onChange=funct ion(){alert("It WORKED!")};
          </SCRIPT>
          [/code]

          Now see the effect.
          Have a good day.

          Kind regards,
          Dmjpro.

            Comment

            • auslandt
              New Member
              • Jun 2007
              • 3
              #4
              Originally posted by dmjpro
              Welcome to TSDN.

              [code=javascript]
              <SCRIPT LANGUAGE="JavaS cript">
              //document.forms[0].elements[1].onChange='aler t("It WORKED!")';
              //Here the function reference requires not the string.
              //Edit the line like this .....
              document.forms[0].elements[1].onChange=funct ion(){alert("It WORKED!")};
              </SCRIPT>
              [/code]

              Now see the effect.
              Have a good day.

              Kind regards,
              Dmjpro.
              Thanks for the reply. However, this does not work either.

                Comment

                • auslandt
                  New Member
                  • Jun 2007
                  • 3
                  #5
                  Originally posted by auslandt
                  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

                    Comment

                    Previous template Next
                    Working...