www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: help with simple code

  1. #1
    Join Date
    Apr 2010
    Posts
    29

    help with simple code

    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

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  3. #3
    Join Date
    Apr 2010
    Posts
    29
    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

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    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");
    }

  5. #5
    Join Date
    Apr 2010
    Posts
    29
    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

  6. #6
    Join Date
    Jan 2009
    Posts
    3,346
    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;

  7. #7
    Join Date
    Apr 2010
    Posts
    29
    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>

  8. #8
    Join Date
    Jan 2009
    Posts
    3,346
    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>

  9. #9
    Join Date
    Apr 2010
    Posts
    29
    unbelievable still doesn't work opened it with ie opera and firefox latest vers

  10. #10
    Join Date
    Apr 2010
    Posts
    29
    cmon there must be someone who can tell me how to use onfocus without altering html code

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    JavaScript is case sensitive:
    Code:
    function myAlert(){
       alert("Test");
    }
    document.getElementById('username').onfocus = myAlert;

  12. #12
    Join Date
    Apr 2010
    Posts
    29
    i try`ed this already and no success does this work for you?

  13. #13
    Join Date
    Jan 2009
    Posts
    3,346
    Quote Originally Posted by Fang View Post
    JavaScript is case sensitive:
    Code:
    function myAlert(){
       alert("Test");
    }
    document.getElementById('username').onfocus = myAlert;
    Oops, my bad. I was copy-and-paste happy.

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by p2xt View Post
    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>

  15. #15
    Join Date
    Apr 2010
    Posts
    29
    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
    Last edited by p2xt; 04-07-2010 at 07:27 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles