Yaggles
09-27-2005, 09:40 AM
I have a form field called "age" and it is a text field. I have javascript take the current year and subtract it by the age field and show the user's birth date. This is shown in a div.
Here is my javascript code:
<script type="text/javascript">
<!--
function showDOB()
{
var NewText = document.getElementById("DynamicText").value;
var DivElement = document.getElementById("TextDisplay");
DivElement.innerHTML = 2005 - NewText;
}
// -->
</script>
Then, I have this for my form and div fields:
<tr>
<td>*Age:</td><td><input id="DynamicText" value="Numbers Only!" class="lighthover" onMouseOver="style.backgroundColor='#999900';" onMouseOut="style.backgroundColor='#009900';" onfocus="if(this.value=='Numbers Only!')this.value='';" onKeyUp="showDOB();" type="text" name="age" /></td>
</tr>
<tr>
<td>*Date Of Birth:</td><td width="10%"><font face="Times New Roman, Times, serif" color="#006600" size='3px'><div class="lighthover" onMouseOver="style.backgroundColor='#999900';" onMouseOut="style.backgroundColor='#009900';" id="TextDisplay"> </div></font></td>
</tr>
When I first load the page, it is a blank div, but when I type it changes. That is good. My problem is that when I clear the age field, the div goes to "2005". How I do get the div to go blank when the age field is changed to blank?
Here is my javascript code:
<script type="text/javascript">
<!--
function showDOB()
{
var NewText = document.getElementById("DynamicText").value;
var DivElement = document.getElementById("TextDisplay");
DivElement.innerHTML = 2005 - NewText;
}
// -->
</script>
Then, I have this for my form and div fields:
<tr>
<td>*Age:</td><td><input id="DynamicText" value="Numbers Only!" class="lighthover" onMouseOver="style.backgroundColor='#999900';" onMouseOut="style.backgroundColor='#009900';" onfocus="if(this.value=='Numbers Only!')this.value='';" onKeyUp="showDOB();" type="text" name="age" /></td>
</tr>
<tr>
<td>*Date Of Birth:</td><td width="10%"><font face="Times New Roman, Times, serif" color="#006600" size='3px'><div class="lighthover" onMouseOver="style.backgroundColor='#999900';" onMouseOut="style.backgroundColor='#009900';" id="TextDisplay"> </div></font></td>
</tr>
When I first load the page, it is a blank div, but when I type it changes. That is good. My problem is that when I clear the age field, the div goes to "2005". How I do get the div to go blank when the age field is changed to blank?