Advanced Search

Results 1 to 7 of 7

Thread: Textbox value disappears

  1. #1
    Join Date
    May 2007
    Location
    Canada
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Textbox value disappears

    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.

    HTML Code:
    <!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.

    HTML Code:
    	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.

    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.

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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) ;

  3. #3
    Join Date
    May 2007
    Location
    Canada
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Veronica View Post
    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

  4. #4
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    May 2007
    Location
    Canada
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ya, that's what I did. Used css since I will be using it to design the controls anyways. Thanks again.

  6. #6
    Join Date
    Feb 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I have a similar TextBox Issue

    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!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,708
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by yeomanjake View Post
    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:

    Code:
    <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:

    Code:
    <!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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •