PDA

View Full Version : Clear Default Text from Input field



tonyking
03-28-2008, 09:41 PM
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
03-28-2008, 09:45 PM
I don't think that you need 2 posts. Just stick to one. ;) Redirect people to this thread in your other post.

tonyking
03-28-2008, 09:51 PM
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/showthread.php?t=30893

Nile
03-28-2008, 09:53 PM
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
03-28-2008, 10:06 PM
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
03-29-2008, 11:42 AM
have you tried adding a function to check if the input is empty and adding the desired default value if it returns true?

jackbenimble4
03-29-2008, 02:48 PM
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
03-30-2008, 03:43 AM
@jack
Here's the url to the form: www.damartravel.com/honeymoons.html (http://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
03-30-2008, 08:59 AM
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
03-30-2008, 01:49 PM
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?

tonyking
03-30-2008, 08:41 PM
Oops.. wrong link, it's html, not htm. Here's the page link:

http://www.damartravel.com/honeymoons.html

jackbenimble4
03-30-2008, 10:55 PM
Hrmmm... I just tested it in IE 7 and it submitted the page correctly to "registry.php". No output was produced from registry.php though. This might be a PHP problem due to a browser problem after all. Does the registry.php file redirect the user? Can I see the part of the PHP that determines whether the form was submitted?

tonyking
03-31-2008, 04:08 AM
Sure! Here's the source of registry.php



<?php
if(isset($_POST['Submit'])){
$name = strip_tags($_POST['name']);
$name = strtolower($name);
switch($name){
case "haynes":
$page = 'haynes.html';
break;
case "bill":
$page = 'bill.html';
break;
case "bart":
$page = 'bart.html';
break;
default:
$page = "noregistry.html";
break;
}
header("Location:$page");
}
?>


Fairly weak code, could do a numerous amount of other things with it, but I can't see any reason it would cause the bug with IE, and the enter key. I ruled out the php because when you click the submit button, instead of pressing enter, the php performed correctly. As always I could be wrong though, this bug is driving me up a wall.

jackbenimble4
03-31-2008, 10:28 AM
Okay, this is what I expected. I believe all you have to do is change the line:


if(isset($_POST['Submit'])){

to


if(isset($_POST['name'])){

$_POST['submit'] is referencing the submit button. In most browsers, when you hit enter to submit a page, it sends the submit input element's data too, but apparently not in Internet Explorer. That's why it only occurs when they hit enter and works perfectly when the click the submit button.

tonyking
03-31-2008, 01:52 PM
Wow. That's all I can say, just wow. I had this thread in the php forum a week before I was convinced into a javascript issue and brought it here. I can't beleive it was that simple!

You were right on the money jackbenimble, I made the change to the code this morning and the IE submit issue disappeared. I'm very appreciative of your help correcting my code, it's been driving me bonkers for a while now. Many Thanks!

jackbenimble4
03-31-2008, 07:03 PM
No problem, I'm glad I could help. Just so you know, an alternative would be to set a name attribute on the form and test to see if that's set. There's also hidden input fields that could be tested to see if the form was submitted.