Dynamic Text Using JavaScript?

I am trying to write a portion of my webpage so that when the user enters in a year into a textbox, next to it, the test changes to show the next year.  Ultimately it should liike like a year range, specifically for a school year (ie: 2000 - 2001, 2008 - 2009).  Additionally, I would like to be able to have the "dynamic year" say "[Invalid]" if the user had not typed in a complete year yet.. (ie: 200 - [Invalid]).  Once the user types in 4 digits, then the year range should display properly.

I know VB and and currently writing ASP pages...unfortunately, I am not very familer with JavaScript.  Below is the code I have, but I have no clue how to write the JavaScript part...can anyone help?
<span id="ctl00_MainContent_lblSchoolYear" style="display:inline-block;width:88px;">School-Year Start:</span>
<input name="ctl00$MainContent$txtSchoolYear" type="text" value="0000" maxlength="4" id="ctl00_MainContent_txtSchoolYear" style="width:32px;" />
<span id="ctl00_MainContent_lblSchoolYearRange"> - [EndYear]</span>

Open in new window

Ben SantiardoAsked:
Who is Participating?
 
HonorGodSoftware EngineerCommented:
Something like this perhaps?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Years </title>
<script type='text/javascript'>
  function field( id ) {
    return document.getElementById( id )
  }
 
  function checkYear( obj, id ) {
    var target = field( id )
    if ( target ) {
      if ( target.nodeName == 'SPAN' ) {
        target = target.firstChild
      }
      if ( obj ) {
        if ( obj.nodeName == 'INPUT' ) {
          var val = obj.value
          var msg = '- [Invalid]'
          if ( /^\d+$/.test( val ) ) {
            if ( val == '0000' ) {
              msg = '- [EndYear]'
            } else {
              if ( val.length == 4 ) {
                msg = '- ' + ( ( val - 0 ) + 1 )
              }
            }
          } else {
            alert( 'checkYear() - non-numeric value entered.' )
          }
          target.nodeValue = msg
        } else {
          alert( 'checkYear() - parameter error. "INPUT" expected, "' + obj.nodeName + '" provided' )
        }
      } else {
        alert( 'checkYear() - parameter error. Document element required.' )
      }
    }
  }
</script>
</head>
<body>
 
<span id="ctl00_MainContent_lblSchoolYear" style="display:inline-block;width:88px;">School-Year Start:</span>
<input name="ctl00$MainContent$txtSchoolYear" type="text" value="0000" maxlength="4" id="ctl00_MainContent_txtSchoolYear" style="width:32px;" onkeyup='checkYear(this,"ctl00_MainContent_lblSchoolYearRange")' />
<span id="ctl00_MainContent_lblSchoolYearRange"> - [EndYear]</span>
 
</body>
</html>

Open in new window

0
 
Ben SantiardoAuthor Commented:
PERFECT!!  That was exactly what I needed.
Thank you so much!
0
 
HonorGodSoftware EngineerCommented:
You are very welcome.  Thanks for the grade & points.

Good luck & have a great day
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.