SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: onfocus problem

  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    onfocus problem

    Hi,
    I m a new to JS and trying to get rid of value when someone click on text field but i get error which says "... is null" here is a screen from firebug.am i doing something wrong?
    All those who wander aren't lost.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    What the error is telling you is that the element you are trying to select (with the id of "Email-1361302728) doesn't exist on the page.
    i.e. document.getElementById("Email-1361302728") is returning null.

    If you want some help with this, post a link to a page where I can see this (or just make a JS Fiddle) and I don't mind having a look.

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The problem i think is everytime the page load its a new field name as its created dynamically.how can i target them then.here u can find link to the page its private
    All those who wander aren't lost.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi, there are a couple of ways, e.g. get a reference to a parent element and work from there.
    Unfortunately, it's late here and I have to work tomorrow
    If noone else has replied by tomorrow afternoon, I'll jump back in then.

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi, there are a couple of ways, e.g. get a reference to a parent element and work from there.
    Unfortunately, it's late here and I have to work tomorrow
    so do i and its 3 am here bt i am so tried of making this work
    All those who wander aren't lost.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I managed to have a look at your problem before going to work.
    It's actually very easy to solve.

    You only have one form in the page. Get a reference to it like this:

    Code JavaScript:
    f = document.getElementsByTagName('form')[0];

    Once you've done this, you can reference the email field via its name (Email):

    Code JavaScript:
    f.Email.onfocus = function(){
      console.log("The input has recieved focus");
    }

    And there you go ...

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I tired it work but this isn't working
    Code JavaScript:
    var f = document.getElementsByTagName('form')[0];
    f.Email.onfocus = function(){
        Email.Value = "";
    }
     
    var f = document.getElementsByTagName('form')[0];
    f.Email.onfocus = function(){
        Email.Value = "";
    }
    var f = document.getElementsByTagName('form')[0];
    f.Email.onfocus = function(){
        Email.Value = "";
    }
    However i want something in if statement but i need this to work to i can add the if.not sure if i am doing it correct. Am i doing Email.Value right?
    All those who wander aren't lost.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by nofel View Post
    i want something in if statement but i need this to work to i can add the if.not sure if i am doing it correct. Am i doing Email.Value right?
    Everything is possible, no worries

    The first thing to note is that value is case sensitive.
    The second thing to notice is that inside the function, you still need the preceding reference to the form.

    This will work:

    Code JavaScript:
    f.Email.onfocus = function(){
        f.Email.value = "";
    }

    This will not:

    Code JavaScript:
    f.Email.onfocus = function(){
        Email.Value = "";
    }

    If you need help with anything else, just let me know.

    This will also work:

    Code JavaScript:
    f = document.getElementsByTagName('form')[0];
    f.Email.onfocus = function(){
      this.value = "";
    }

  9. #9
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    the "this" is somewhat hard for me to grasp for some reason.i tried ur code and it work.of course it would ur a genius. However i am unable to get onblur to work Question : how does the code you wrote know the "Email" field and where it is as the id was changing as i mentioned above
    All those who wander aren't lost.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    you have this:

    Code JavaScript:
    var f = document.getElementsByTagName('form')[0];
    f.Email.onfocus = function(){
        if(f.Email.value = "email"){
            f.Email.value = "";
        }
    }
    f.Email.onblur = function(){
        if(f.Email.value = ""){
            f.Email.value = "email";
        }
    }

    This does not work as you are using a single equals to check for equality.
    In JavScript (and most other programming languages) you use a double equals for this.

    i.e. this:

    Code JavaScript:
    if(f.Email.value = ""){

    should be:

    Code JavaScript:
    if(f.Email.value == ""){

    In my code the this refers to the element which triggered the event your handler is dealing with (i.e. your email field).
    The code knows where the email field is as it gets a reference to the form with this:

    Code JavaScript:
    f = document.getElementsByTagName('form')[0];

    Then uses the input's name attribute to attach an event handler to the field:

    Code JavaScript:
    f.Email.onfocus = function(){...}

    You can access the other fields in the same way, e.g. f.Name.value and f.Message.value

    HTH

  11. #11
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I am using WordPress and nearly forms which i tried don't have onfocus thing for default value. Now using the code its not getting anywhere as i m inserting in into one of many js the form uses.any idea of any good ones?
    All those who wander aren't lost.

  12. #12
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I included it my site but its not working
    All those who wander aren't lost.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by nofel View Post
    I included it my site but its not working
    Stick it within two script tags and place it right before the closing body tags.
    Somethin

    HTML Code:
        <?php wp_footer(); ?>
        <script>
          var f = document.getElementsByTagName('form')[0];
          f.Email.onfocus = function(){
            if(f.Email.value == "email"){
              f.Email.value = "";
            }
          }
          f.Email.onblur = function(){
            if(f.Email.value == ""){
              f.Email.value = "email";
            }
          }
        </script>
      </body>
    </html>
    Try and place this after wp_footer() if possible.


Bookmarks

Posting Permissions

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