Log in

View Full Version : Textbox value disappears


pman
06-15-2007, 12:47 AM
Hey guys,

Here's another unusual problem. If you just try the following you will see that there is text box and button beside it. The text box has a default value.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Input value test</title>

</head>

<body id="page1Body">
<script type="text/javascript">
var searchInput = document.createElement("input") ;
searchInput.id = "search" ;
searchInput.type = "text" ;
searchInput.value = "Enter a query" ;
searchInput.size = 40 ;

var searchSubmit = document.createElement("input") ;
searchSubmit.id = "btnSearch" ;
searchSubmit.type = "button" ;
searchSubmit.value = "Search" ;

document.getElementById("page1Body").appendChild(searchInput) ;
document.getElementById("page1Body").appendChild(searchSubmit) ;

</script>
</body>
</html>



So far so good. But since the submit button is too close to the textbox, I did the following after adding the textbox so that there's some space between them, and then appended the submit button.


document.getElementById("page1Body").innerHTML += "&nbsp;" ;

And surprisingly, the text value disappears from the text box. It's happening in both Firefox and Opera. Somehow, IE is okay.:confused:

Any idea what's going on? I know I could just use the innerHTML to add the entire text box and the submit button, but I want to use what I have right now, just because it's more cleaner. Thanks for your help.
Veronica
06-15-2007, 01:56 AM
Instead of innerHTML, why not use styles to set the spacing?

<style>
#btnSearch {margin-left:5px;}
</style>

Or you could also just add to the javascript:

document.getElementById("page1Body").appendChild(searchInput) ;
document.write("&nbsp;") ;
document.getElementById("page1Body").appendChild(searchSubmit) ;
pman
06-15-2007, 02:01 AM
Instead of innerHTML, why not use styles to set the spacing?

<style>
#btnSearch {margin-left:5px;}
</style>

Hmmm.... why didn't I think of that? lol...

thanks veronica

I guess that will work, but I'm still curious to know why the value disappears from the text box.


document.write("&nbsp;") ;
I think that will only work in my example that I gave. But if I had those inside some other element or a div, will it still work? I think write only works for the document object
Veronica
06-15-2007, 02:48 AM
I'm not sure why the values would disappear. Alot of people would say it's because innerHTML is an IE proprietary thing, but other browsers today do support it, so I'm not sure that's the reason. If it's a form issue, there are probably workarounds, but if the css fix works for you, that would be the easiest solution.
And, you're right, I have no idea if the document.write solution would work if there were other elements or divs, so - back to the css suggestion???
pman
06-15-2007, 03:19 AM
Ya, that's what I did. Used css since I will be using it to design the controls anyways. Thanks again.
yeomanjake
02-18-2012, 02:22 AM
I am trying to find a script that does the following: Most anyone has been on Websites where a submission text box has text in it, like "Enter your Search String" or something like that, and as soon as you place the insertion point in the text field, the text disappears, thus allowing you to place your own string in the box. Does anyone know where I can find the script that lets you do this on your website?

Thanks!
:)
jscheuer1
02-18-2012, 06:49 AM
I am trying to find a script that does the following: Most anyone has been on Websites where a submission text box has text in it, like "Enter your Search String" or something like that, and as soon as you place the insertion point in the text field, the text disappears, thus allowing you to place your own string in the box. Does anyone know where I can find the script that lets you do this on your website?

Thanks!
:)

In it's most basic form it can be done inline like so:


<input type="text" value="Please Enter Whatever" onfocus="if(this.value === this.defaultValue){this.value = '';}">

There are many variations, including those that restore the defaultValue if the text input loses focus and is blank.

Here's one way to do that for all text inputs on a page:


<!DOCTYPE html>
<html>
<head>
<title>Text Input defaultValue - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<input type="text" value="Please Enter Whatever"><br>
<input type="text" value="Please Enter a Number"><br>
<input type="text" value="Please Enter a Color"><br>
<script type="text/javascript">
(function(){
var puts = document.getElementsByTagName('input');
for (var i = puts.length - 1; i > -1; --i){
if(puts[i].type === 'text'){
puts[i].onfocus = function(){if(this.value === this.defaultValue){this.value = '';}};
puts[i].onblur = function(){if(this.value === ''){this.value = this.defaultValue;}};
}
}
})();
</script>
</body>
</html>

Other variations strip white space from the values before evaluating them. There are a number of variations around both as to what is done and as to how the code goes about doing it.