How to create a drop down date menu within a login page

Experts,

I am trying to add an element to my form that will allow the user to enter their date of birth which will post to a mYSQL database 'Register'. I am looking at the better solution of 2 options:
1) A javascript calendar application (although this isnt popular for a date of birth submission given the number of years the user may need to scroll back) or..
2) a drop down menu of month:, day:, and year. The difficulty with this one is that i dont know whether to make this a dynamic menu list - after all - the number of days within the day selection list depends on the month entered and also the year (in the case of a leap year).

I imagine many people have attacked this problem for registration pages - does anyone have any example code that is faily well commented?


Thanks!

simondo
simondopickupAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineNo oneCommented:
Hi simondo,

I don't have any code, just a thought or two.

One, the javascript calendar is not good for DOB.  As you note, the user has to go too far back.

Two, why bother making the drop down dynamic?  People are either going to give you an honest date or they will not.  Restricting February to 28 days or making sure January always has 31 days is only important if you need to verify the DOB for some official purpose.
0
simondopickupAuthor Commented:
You are right. And i suppose its a formality. However, I would like the menu to be sophisticated to know that 'IF' February is selected 'THEN' the list available for the day selection will only extend to 28 days; and so on for the remaining 11 months. If i can add a level of sophistication that will extend this to 29 days for a leap year - then thats even better.

Thanks for your comments.
0
simondopickupAuthor Commented:
Jason1178, do you know of any links or examples i could look at to solve this problem?

Thanks for your time.

SImondo
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

HonorGodSoftware EngineerCommented:
Something like this might work.  If you need it revised to not display "invalid" dates (e.g., 2/31/2008), let me know.
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Date</title>
<script type='text/javascript'>
  var Today = new Date();
 
  function Two( val ) {
    return ( val < 10 ) ? '0' + val : val;
  }
 
  function setDate( id, dateObj ) {
    var field = document.getElementById( id );
    if ( field == null ) {
      alert( 'Specified output field not found.  id="' + id + '".');
    } else {
      field.value = Two( dateObj.getMonth() + 1 ) + '/' +
                    Two( dateObj.getDate() ) + '/' +
                    dateObj.getFullYear();
    }
  }
 
  function Build( monId, dayId, yearId ) {
    MonthSel( monId );
    DaySel( dayId );
    YearSel( yearId );
    setDate( 'Date', new Date() );
  }
 
  function upDate( monId, dayId, yearId, sel ) {
    var field = document.getElementById( 'Date' );
    var date  = new Date( field.value );
    if ( field == null ) {
      alert( 'Specified output field not found.  id="Date".');
    } else {
      var opts = sel.getElementsByTagName( 'option' );
      var val  = opts[ sel.selectedIndex ].value;
      alert( 'selected: ' + val );
      if ( monId != null ) {
        date.setMonth( val * 1 );      // Numeric value required
        setDate( 'Date', date );
      }
      if ( dayId != null ) {
        date.setDate( val * 1 );      // Numeric value required
        setDate( 'Date', date );
      }
      if ( yearId != null ) {
        date.setFullYear( val * 1 );  // Numeric value required
        setDate( 'Date', date );
      }
    }
  }
 
  function MonthSel( id ) {
    var span = document.getElementById( id );
    if ( span == null ) {
      alert( 'Specified month id "' + id + '" not found.' );
    } else {
      var sel = document.createElement( 'select' );
      sel.setAttribute( 'id', 'PickMonth' );
      sel.setAttribute( 'onChange', 'upDate( "' + id + '", null , null, this )' );
      var mon = 'January,February,March,April,May,June,July,August,October,November,December'.split( ',' );
      var now = Today.getMonth();
      for ( var i = 0; i < mon.length; ++i ) {
        var here = document.createElement( 'option' );
        here.setAttribute( 'value', i.toString() );
        if ( i == now ) {
          here.setAttribute( 'selected', true );
        }
        here.appendChild( document.createTextNode( mon[ i ] ) );
        sel.appendChild( here );
      }
      span.appendChild( sel );
    }
  }
 
  function DaySel( id ) {
    var span = document.getElementById( id );
    if ( span == null ) {
      alert( 'Specified day id "' + id + '" not found.' );
    } else {
      var sel = document.createElement( 'select' );
      sel.setAttribute( 'id', 'PickDay' );
      sel.setAttribute( 'onChange', 'upDate( null, "' + id + '" , null, this )' );
      var now = Today.getDate();
      for ( var d = 1; d < 32; ++d ) {
        var here = document.createElement( 'option' );
        here.setAttribute( 'value', d.toString() );
        if ( d == now ) {
          here.setAttribute( 'selected', true );
        }
        here.appendChild( document.createTextNode( d.toString() ) );
        sel.appendChild( here );
      }
      span.appendChild( sel );
    }
  }
 
  function YearSel( id ) {
    var span = document.getElementById( id );
    if ( span == null ) {
      alert( 'Specified year id "' + id + '" not found.' );
    } else {
      var today = new Date();          // Create a Date object so we can
      var yr  = today.getFullYear();   // Current year
      var sel = document.createElement( 'select' );
      sel.setAttribute( 'id', 'PickYear' );
      sel.setAttribute( 'onChange', 'upDate( null, null, "' + id + '", this )' );
      for ( var y = -5; y < 6; ++y ) { // minus or plus 5 years
        var here = document.createElement( 'option' );
        here.setAttribute( 'value', ( yr + y ).toString() );
        if ( y == 0 ) {
          here.setAttribute( 'selected', true );
        }
        here.appendChild( document.createTextNode( (yr + y ).toString() ) );
        sel.appendChild( here );
      }
      span.appendChild( sel );
    }
  }
</script>
</head>
<body onload='Build("month","day","year")'>
<table border='0'>
  <tr>
    <td><span id='month'></span></td>
    <td><span id='day'></span></td>
    <td><span id='year'></span></td>
  </tr>
</table>
<form action=''>
  <div>
    Date:
    <input type='text' id='Date' readonly size='10'>
  </div>
</form>
</body>
</html>

Open in new window

0
simondopickupAuthor Commented:
HonorGod,

Yes i do need just that. Invalid dates are no good to me. How would this script be amended for that? Thanks for your help!
0
HonorGodSoftware EngineerCommented:
- Do you want the year to be a dropdown selection list?
- If so, what years do you want specified?
0
simondopickupAuthor Commented:
I wanted the years from 1940 to the current year minus 5 years in a dropdown list yes.

Thanks Honor God!!
0
simondopickupAuthor Commented:
HonorGod.I  see you have scripted in javascript. Is this a client or server side script and what implications wil this have on running MySQL queries with the form submit within the html?
Sorry for the silly questions - i am new to this language and trying to figure out the ins and outs. I hope to learn lots from your code - but need to establish some fundamentals first. Can you briefly explain?

Thanks!

Simondo
0
HonorGodSoftware EngineerCommented:
Simodo:

  The year selection is easy.  I made that change very quickly.

  The JavaScript, as written, is client side.  As far as executing MySQL queries are concerned, we'll have to dig into that a bit.  I have done very little with SQL, and almost no MySQL.  However, I believe that we have options as far as submitting MySQL queries from the client are concerned.

  Here is a revised example.  The "day of the month" selection is not built until the year, and month have been selected, which allows us to determine the number of days in the selected month.

Take a look at this.

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Date</title>
<script type='text/javascript'>
  //------------------------------------------------------------------
  // Structure to hold the id attributes for the important select
  // elements - with the default id attributes
  //------------------------------------------------------------------
  var ids   = { 'year'  : 'year',
                'month' : 'month',
                'day'   : 'day'
  }
  //------------------------------------------------------------------
  // Global variable to hold the selcted date.
  //------------------------------------------------------------------
  var Bday  = new Date();
 
  //------------------------------------------------------------------
  // Name: Two()
  // Role: Simple check to guarantee that the specified value has at
  //       least two digits.
  //------------------------------------------------------------------
  function Two( val ) {
    return ( val < 10 ) ? '0' + val : val;
  }
 
  //------------------------------------------------------------------
  // Name: field()
  // Role: Attempt to locate the specified document element, if none
  //       is found, display the specified message.
  //------------------------------------------------------------------
  function field( id, msg ) {
    var obj = document.getElementById( id );
    if ( ! obj ) {
      alert( msg );
    }
    return obj;
  }
 
  //------------------------------------------------------------------
  // Name: setDate()
  // Role: Used to display the selected date in a text field
  //------------------------------------------------------------------
  function setDate( id, date ) {
    var obj = field( id, 'Specified output field not found.  id="' + id + '".' );
    if ( obj ) {
      obj.value = Two( date.getMonth() + 1 ) + '/' +
                  Two( date.getDate() ) + '/' +
                  date.getFullYear();
    }
  }
 
  //------------------------------------------------------------------
  // Name: Build()
  // Role: Routine used to dynamically generate the Month/Day & Year
  //       drop down lists, and populate the target text field using
  //       today's date.
  //------------------------------------------------------------------
  function Build( monId, dayId, yearId ) {
    if ( monId  ) ids[ 'month' ] = monthId;
    if ( dayId  ) ids[ 'day'   ] = dayId;
    if ( yearId ) ids[ 'year'  ] = dayId;
    YearSel( ids[ 'year' ] );
    setDate( 'Date', new Date() );
  }
 
  //------------------------------------------------------------------
  // Name: upDate()
  // Role: Update the user selected date value by:
  //       - Determining which select statement was changed
  //       - Converting the selection value to be numeric
  //       - Changing the date based upon the changed selection
  //------------------------------------------------------------------
  function upDate( monId, dayId, yearId, sel ) {
    var obj = field( 'Date', 'Specified output field not found.  id="Date".' );
    if ( obj ) {
      var opts = sel.getElementsByTagName( 'option' );
      var val  = opts[ sel.selectedIndex ].value;
      alert( 'update() selected: ' + val );
      if ( monId ) {
        Bday.setMonth( val * 1 );      // Numeric value required
        DaySel( ids[ 'day' ] );        
      }
      if ( dayId ) {
        Bday.setDate( val * 1 );       // Numeric value required
      }
      if ( yearId ) {
        Bday.setFullYear( val * 1 );   // Numeric value required
        MonthSel( ids[ 'month' ] );        
      }
      setDate( 'Date', Bday );
    }
  }
 
  //------------------------------------------------------------------
  // Name: MonthSel()
  // Role: Build the select group for choosing the Month
  //------------------------------------------------------------------
  function MonthSel( id ) {
    var span = field( id, 'Specified month id "' + id + '" not found.' );
    if ( span ) {
      
      //--------------------------------------------------------------
      // If this element already contains a SELECT, discard it.
      //--------------------------------------------------------------
      var child = span.firstChild;
      if ( ( child ) && ( 'nodeName' in child ) && ( child.nodeName == 'SELECT' ) ) {
        child.removeNode( true );
      }
      
      //--------------------------------------------------------------
      // Create a select list for the Month of the Year
      //--------------------------------------------------------------
      var sel = document.createElement( 'select' );
      sel.setAttribute( 'id', 'PickMonth' );
 
      if ( sel.attachEvent ) {
        sel.attachEvent( 'onchange', function() {
          upDate( id, null, null, this.event.srcElement );
        } );
      } else {
        sel.setAttribute( 'onChange', 'upDate( "' + id + '", null , null, this )' );
      }
      
      //--------------------------------------------------------------
      // and populate it...
      //--------------------------------------------------------------
      var mon  = ( 'January,February,March,April,May,June,July,' +
                   'August,October,November,December' ).split( ',' );
      var now  = Bday.getMonth();
      var here = document.createElement( 'option' );
      here.appendChild( document.createTextNode( 'Month' ) );
      here.setAttribute( 'value', '-1' );
      here.setAttribute( 'selected', true );
      sel.appendChild( here );
      for ( var i = 0; i < mon.length; ++i ) {
        here = document.createElement( 'option' );
        here.setAttribute( 'value', i.toString() );
        here.appendChild( document.createTextNode( mon[ i ] ) );
        sel.appendChild( here );
      }
      span.appendChild( sel );
    }
  }
 
  //------------------------------------------------------------------
  // Name: DaySel()
  // Role: Build the select group for choosing the Day of the Month
  // Note: The number of days displayed is dependent upon the year,
  //       and month currently provided (as found in the global Bday
  //       object)
  //------------------------------------------------------------------
  function DaySel( id ) {
    var span = field( id, 'Specified day id "' + id + '" not found.' );
    if ( span ) {
      //--------------------------------------------------------------
      // If this element already contains a SELECT, discard it.
      //--------------------------------------------------------------
      var child = span.firstChild;
      if ( ( child ) && ( 'nodeName' in child ) && ( child.nodeName == 'SELECT' ) ) {
        child.removeNode( true );
      }
 
      //--------------------------------------------------------------
      // Build the Day of Month selection list using the actual number
      // of days in the currently specified month.
      //--------------------------------------------------------------
      var sel = document.createElement( 'select' );
      sel.setAttribute( 'id', 'PickDay' );
 
      if ( sel.attachEvent ) {
        sel.attachEvent( 'onchange', function() { upDate( null, id, null, this.event.srcElement ); } );
      } else {
        sel.setAttribute( 'onChange', 'upDate( null, "' + id + '" , null, this )' );
      }
 
      //--------------------------------------------------------------
      // and populate it...
      //--------------------------------------------------------------
      var now = Bday.getDate();
      var date = new Date( Bday.getFullYear(), Bday.getMonth() + 1, 0 );
      for ( var d = 1; d < date.getDate() + 1; ++d ) {
        var here = document.createElement( 'option' );
        here.setAttribute( 'value', d.toString() );
        if ( d == now ) {
          here.setAttribute( 'selected', true );
        }
        here.appendChild( document.createTextNode( d.toString() ) );
        sel.appendChild( here );
      }
      span.appendChild( sel );
    }
  }
 
  //------------------------------------------------------------------
  // Name: YearSel()
  // Role: Build the select group for choosing the Year
  //------------------------------------------------------------------
  function YearSel( id ) {
    var span = field( id, 'Specified year id "' + id + '" not found.' );
    if ( span ) {
      var today = new Date();          // Determine the current year
      var yr    = today.getFullYear();
      var sel   = document.createElement( 'select' );
      sel.setAttribute( 'id', 'PickYear' );
 
      if ( sel.attachEvent ) {
        sel.attachEvent( 'onchange', function() {
          upDate( null, null, id, this.event.srcElement );
        } );
      } else {
        sel.setAttribute( 'onChange', 'upDate( null, null, "' + id + '", this )' );
      }
 
      for ( var y = 1940; y < ( yr - 5 ); ++y ) {
        var here = document.createElement( 'option' );
        here.setAttribute( 'value', y );
        here.appendChild( document.createTextNode( y ) );
        sel.appendChild( here );
      }
      span.appendChild( sel );
    }
  }
</script>
</head>
<body onload='Build()'>
<table border='0'>
  <tr>
    <td><span id='year'></span></td>
    <td><span id='month'></span></td>
    <td><span id='day'></span></td>
  </tr>
</table>
<form action=''>
  <div>
    Date:
    <input type='text' id='Date' readonly size='10'>
  </div>
</form>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
simondopickupAuthor Commented:
Thanks HonorGod - that works great and there are lots of useful functions to cherrry pick! Thanks again, A++ and well commented script.

Simondo
0
HonorGodSoftware EngineerCommented:
Thanks for the nice compliments, the grade, and the points.

Good luck

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.