www.webdeveloper.com
Results 1 to 12 of 12

Thread: clear textbox value if value = something

Hybrid View

  1. #1
    Join Date
    Aug 2009
    Posts
    7

    Question clear textbox value if value = something

    This is the code I have:
    HTML Code:
    <input type="text" value="name" name="name" onfocus="if(this.value='name'){this.value=' '}">
    Basically, I want to clear the text in the textbox onFocus, but only if the value of the textbox is 'name'.

    Hellpppp?

  2. #2
    Join Date
    Aug 2009
    Posts
    7
    Example here: http://unedible.com/textbox.html

    It works halfway- it clears the text...but always instead of only when a certain value is present.

  3. #3
    Join Date
    Aug 2007
    Posts
    3,767
    First of all, you are putting a space in the textbox. You know that you can actually clear it with an empty string ""?

    The equality check is ==, two ='s. Assignment, one thing is equal to another, is one =.

  4. #4
    Join Date
    Aug 2009
    Posts
    7
    Oh. I knew about the space, I just put it there so on the post you could tell the differece between two ' and ". I got it working anyway, actually. I have one more issue concerning form submission, though.
    Code:
     function submitForm(){
     	var name = document.getElementById ('name');
    	document.write('Name:' + name);
     }
    and the html is
    Code:
    <form name="form" onSubmit="submitForm()">
    <input type="text" value="name" name="name" id="name" onfocus="clearMe(this)">
    </form>
    This doesn't seem to be working. D:

  5. #5
    Join Date
    Aug 2009
    Posts
    593
    I'm guessing your page goes blank and only displays the name object?
    Are you trying to validate the name field here? (name.value)

    document.write clears the entire page if you call it when the page is finished loading. Try alert instead to check the value.

    Also you are not returning a true/false value from submitForm() ;
    And you are not returning the results of submitForm() to the actual form: onsubmit="return submitForm();"
    Last edited by thraddash; 08-13-2009 at 07:05 PM.

  6. #6
    Join Date
    Aug 2009
    Posts
    7
    What happens in Google Chrome is...nothing, except the address bar adds on a ?name=John&email=myname@domain.com, ect. In Firefox you see a Name: and either blank space or the word null.

  7. #7
    Join Date
    Aug 2009
    Posts
    593
    What do you want it to do, and I will change the code to do just that.

  8. #8
    Join Date
    Aug 2009
    Posts
    7
    Display the entered content on the page. I've done this before, it's just not seeming to work now. I'm not that great at Javascript. ;___;

  9. #9
    Join Date
    Aug 2009
    Posts
    593
    Something like:

    HTML Code:
    <script type="text/javascript">
    	function submitForm(){
    		var name = document.getElementById('name');
    		document.getElementById("results").innerHTML = 'Name: ' + name.value;
    		//document.write('Name:' + name);
    		return false;
    	}
    	function clearMe() {}
    </script>
    
    <form name="form" onSubmit="return submitForm();">
    	<input type="text" value="name" name="name" id="name" onfocus="clearMe(this);">
    	<input type="submit" />
    </form>
    
    <div id="results"></div>

  10. #10
    Join Date
    Aug 2009
    Posts
    7
    The result flashes, but then goes away. Help?

  11. #11
    Join Date
    Aug 2009
    Posts
    593
    Did you change your form to return the value (which is false), otherwise it will just post the data?

    HTML Code:
    <form name="form" onSubmit="return submitForm();">
    You also need to return false from the submitForm() function;

  12. #12
    Join Date
    Aug 2009
    Posts
    7
    AHA! That worked! Thanks so much.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles