Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2011
    Location
    California
    Posts
    20
    Thanks
    0
    Thanked 5 Times in 5 Posts

    How to change a textbox value with javascript only when the textbox is empty?

    Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be?

    Code:
    <form name="signup" action="javascript:void(0);" method="post">
    
    <table>
    	<tr>
    		<td>Date Of Birth:</td>
    		<td>
    		<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
    		<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
    		<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
    	</tr>
    	<tr>
    		<td></td>
    		<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
    	</tr>
    </table>
    </form>
    
    <script type="text/javascript" language="javascript">
    <!--
    	document.signup.DOBmonth.value="MM";
    	document.signup.DOBday.value="DD";
    	document.signup.DOByear.value="YYYY";
    
    function clearDOBmonth() { document.signup.DOBmonth.value="";}
    function clearDOBday() { document.signup.DOBday.value="";}
    function clearDOByear() { document.signup.DOByear.value="";}
    function restoreDOBmonth()
    	{
    		if ('document.signup.DOBmonth.value = ""')
    			{
    				document.signup.DOBmonth.value = "MM";
    				// alert(document.signup.DOBmonth.value);
    			}
    	}
    
    //-->
    </script>
    Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example:
    Code:
    var a = document.form.textbox.value;
    a = blue;
    does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks!
    Last edited by leapinglemur55; 02-01-2011 at 01:39 AM. Reason: Problem fixed.

  • #2
    New Coder
    Join Date
    Sep 2010
    Posts
    63
    Thanks
    1
    Thanked 2 Times in 2 Posts
    In javascript you have to use == double equal signs for "equal to"

    so

    if ('document.signup.DOBmonth.value = ""'

    should be

    if ('document.signup.DOBmonth.value == ""'

    and for your 2nd question, if the renaming of the variable comes AFTER the variable was assigned to the textbox then no. variables are only temporary storage units and if you assign the value before giving it a new definition, it should stay in the text box

    P.S.. I just noticed that inside that IF function you have it surrounded by single quotes. take those single quotes out, they aren't needed and most likely another issue. only strings need to go inside quotations
    Last edited by Johnb21; 02-01-2011 at 01:33 AM.

  • #3
    New Coder
    Join Date
    Jan 2011
    Location
    California
    Posts
    20
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Just about to post that the first answer wasn't working. Thanks! It works fine now with both fixes.


  •  

    Posting Permissions

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