SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question populating the drop down menu through a javascript loop

    we're just starting our lesson on JavaScript and i need to make a form that ask the user's birthday on a drop down menu, but the day drop down menu ranges from 1-31 must be populated using a javascript loop and also the year. Then after the user selects the birthday, the age will be shown automatically.
    I don't know how to start please help

    thank you in advance

  2. #2
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just a little help from me:

    Code HTML4Strict:
    <html>
        <head>
            <script language="javascript">
                function dgi(el)
                {
                    return document.getElementById(el);
                }
                var aYear = 100;
                window.onload = function()
                {
                    var y = dgi('year');
                    var d = new Date();
                    var _y = d.getFullYear();
     
                    var _o = document.createElement('option');
                    _o.setAttribute('value', 0);
                    _o.innerHTML = 'Year';
                    y.appendChild(_o);
     
                    for(var i = 0; i < aYear; i++)
                    {
                        var o = document.createElement('option');
                        o.setAttribute('value', _y);
                        o.innerHTML = _y;
                        y.appendChild(o);
                        _y--;
                    }
                }
                function loadMonths(obj)
                {
                    if(obj.value != '0')
                    {
                        dgi('months').style.display = '';
                    }
                    else
                    {
                        dgi('months').style.display = 'none';
                    }
                }
                function loadDays(obj)
                {
                    var days = dgi('days');
     
                    if(obj.value != '0')
                    {
                        clearDays();
                        var number = 32 - new Date(parseInt(dgi('year').value), parseInt(dgi('months').value)-1, 32).getDate();
     
                        for(var i = 1; i <= number; i++)
                        {
                            var o = document.createElement('option');
                            o.setAttribute('value', i);
                            o.innerHTML = i;
                            days.appendChild(o);
                        }
                        days.style.display = '';
                    }
                    else
                    {
                        clearDays();
                        hideDays();
                    }
                }
                function clearDays()
                {
                    var days = dgi('days');
                    days.innerHTML = '';                
                }
     
                function hideDays()
                {
                    var days = dgi('days');
                    days.style.display = 'none';
                }
     
            </script>
        </head>
        <body>
            <select id="year" onchange="loadMonths(this);">
     
            </select>
            <select id="months" style="display: none;" onchange="loadDays(this);">
                <option value="0">Month</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            <select id="days" style="display: none;"></select>
        </body>
    </html>


Bookmarks

Posting Permissions

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