onfocus problem

[nofel]

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?

[Pullo]

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.

[nofel]

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

[Pullo]

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.

[nofel]

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

[Pullo]

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:

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

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

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

And there you go ...

[nofel]

I tired it work but this isn't working

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?

[Pullo]

Hi there,

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:

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

This will not:

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

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

This will also work:

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

[nofel]

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

[Pullo]

Hi,

you have this:

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:

if(f.Email.value = ""){

should be:

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:

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

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

f.Email.onfocus = function(){...}

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

HTH

[nofel]

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?

[nofel]

I included it my site but its not working

[Pullo]

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

    <?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.