Clear Default Text from Input field

[tonyking]

Hello everyone, here's my dilemma:

I am using the below code to clear the default text in an input box.

addEvent(window, 'load', init, false);

function init() {
    var formInputs = document.getElementsByTagName('input');
    for (var i = 0; i < formInputs.length; i++) {
        var theInput = formInputs[i];
        
        if (theInput.type == 'text' && theInput.className.match(/\bcleardefault\b/)) {  
            /* Add event handlers */          
            addEvent(theInput, 'focus', clearDefaultText, false);
            addEvent(theInput, 'blur', replaceDefaultText, false);
            
            /* Save the current value */
            if (theInput.value != '') {
                theInput.defaultText = theInput.value;
            }
        }
    }
}

function clearDefaultText(e) {
    var target = window.event ? window.event.srcElement : e ? e.target : null;
    if (!target) return;
    
    if (target.value == target.defaultText) {
        target.value = '';
    }
}

function replaceDefaultText(e) {
    var target = window.event ? window.event.srcElement : e ? e.target : null;
    if (!target) return;
    
    if (target.value == '' && target.defaultText) {
        target.value = target.defaultText;
    }
}

The issue I am having, is when the user pushes enter on the keyboard, it transfers them to the script page, and from what I can tell doesn't even try to run it. Everything is fine if they click submit instead though!? I've been round and round with the php, and it's pretty simple code, so I'm confident the issue is in the javascript.

Also, please note, that this only occurs using Internet Explorer. I can't replicate this bug in Firefox. Any ideas?

[Nile]

I don't think that you need 2 posts. Just stick to one. Redirect people to this thread in your other post.

[tonyking]

I don't think that you need 2 posts. Just stick to one. Redirect people to this thread in your other post.

Good idea Nile, ty. For those who care, here is the original thread when I thought it could have been an issue with the php:

http://www.dynamicdrive.com/forums/s...ad.php?t=30893

[Nile]

Well, exactly. How does the javascript connect to the page that your using? Is it something where php and javscript are working together? Or does the javascript send to one page, and the php sends data to another?

[tonyking]

The javascript is an external file (code above) referenced in the head of my document. The javascript only applies to the form input field. And I can only duplicate this error by hitting enter, so it almost has to be the javascript. Here's the code for the form:

<form name="Submit" method="post" action="registry.php">
<input type="text" name="name" class="cleardefault" size="20" value="Groom's Last Name" /><br />
<font size="-2" color="#0099FF">(Use ALL lowercase letters)</font><br /><br />
<input type="Submit" name="Submit" value="Submit" />
</form>

The javascript is applied in the class, to the name input field. I think somehow the script clears the submitted input value when you hit enter. I don't understand javascript 2% out of 100, lol. But I am trying!

[zaphod42]

have you tried adding a function to check if the input is empty and adding the desired default value if it returns true?

[jackbenimble4]

Well, exactly. How does the javascript connect to the page that your using? Is it something where php and javscript are working together? Or does the javascript send to one page, and the php sends data to another?

There's no way this is PHP. Sense PHP is on the server side, it has no relevance to reactions to key presses. Also, the simple fact that it only occurs in IE indicates it's not a PHP problem.

It's definitely a javascript problem and it's a rough one too. Internet Explorer can be a total b!tch. Can we see the url? The script looks like it should be performing beautifully.

[tonyking]

@jack
Here's the url to the form: www.damartravel.com/honeymoons.html
The only valid value would be: haynes

This is a troublesome little bug and I'm absolutely baffled. Hopefully there's a simple fix.

@zaphod42
I haven't tried that, I will see if I can put something together this weekend and see what happens. My coding skills aren't the greatest but I am eager to expand my knowledge.

[rangana]

Your JS is so complex, yet this can be fix using onfocus and onblur attributes

<input type="text" name="name" class="cleardefault" size="20" value="Groom's Last Name" onfocus="this.value=''" onblur="this.value='Grooms/'s Last Name' 	"/>

See if it helps

[jackbenimble4]

Your JS is so complex, yet this can be fix using onfocus and onblur attributes

<input type="text" name="name" class="cleardefault" size="20" value="Groom's Last Name" onfocus="this.value=''" onblur="this.value='Grooms/'s Last Name' 	"/>

See if it helps

He is using the focus and blur event listeners. His code is actually very elegant with no superfluous junk. It uses event listeners which is a much better solution than hard coding event handlers by using the html attributes.

Tony, it looks like the page was removed?