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 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 1 Time in 1 Post

    Question Populating select boxes with javascript & jquery

    What I'm trying to do is a basic registration page. All is going well until I get to the Date Of Birth part. What I would like to do is have three select boxes, Year, Month and Day. It starts with the Year having options while Month and Day are nothing more than a select box with an option containing a blank value holding the title of Month or Day. When the user selects a Year, then the Month select box is populated with the 12 months. When the Month is then selected, the day select field is then populated with the days in that month (28,30 or 31).

    The problem I'm running into is that the boxes seem to stop responding. I've tried to get the month value using .blur, .change, focusout.. I've tried using javascript functions to write the select boxes, I've tried using ajax calls to php files to write the boxes. It's not that I can't get the boxes to work, each of the ways I've tried has been successfull in writing a select box. Apart from the Year box, which is coded into the page, I can't get the values from the last 2 which are then inserted. Without the value I can't work on the next box...

    I've tried alert()'ing the
    Code:
    $('#ID_I_want_val_from').val();
    and it just ends up with nothing.

    I'm lost. I've googled and searched and haven't found anything that has helped me find a solution.

    I rarely ask for help as I like to find the answer or solution myself. I've been stuck on this for a week now and it's starting to make me frustrated. So anyone who could shed some light on this would be a great help.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here you are:-


    Code:
    <html>
    <head>
    
    <script  type="text/javascript">
    
    // populate the years select list
    var codeYear = "";
    codeYear += "<select id='year1' onchange=\"SelDate('day1','month1','year1');\">";
    codeYear += "<option value='--'>- Year -</option>"			 
    for (var i = 2013; i >= 1900; i--) {
    codeYear += "<option value='" + i + "' >" + i + "</option>";
    }			   
    codeYear += "</select>";
    document.write(codeYear);
    
    function SelDate(d,m,y) {
    var dy=document.getElementById(d);
    var mth=document.getElementById(m);
    var yr=document.getElementById(y);
    dy.options.length=1;
    if (mth.value && yr.value) {
    var days=new Date(yr.value,mth.value,1,-1).getDate(); // the first day of the next month minus 1 hour
    for (var i=1; i<=days; i++){
    dy.options[i] = new Option(i,i,true,true);
    }
    dy.selectedIndex = 0;
    }
    }
    </script>
    </head>
    
    <body>
    
    <!--  Alternative to populate year
    <select id="year1" onchange="SelDate('day1','month1','year1');" >
    <option >Year</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    </select>
    -->
    
    <select id="month1" onchange="SelDate('day1','month1','year1');">
    <option >Month</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option value="8">Aug</option>
    <option value="9">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
    </select>
    
    <select id="day1" >
    <option >Day</option>
    </select>
    </body>
    
    </html>

    Quizmaster: Since 1920 a statue of which former US President has resided in Parliament Square?
    Contestant: Ronald Reagan

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Scyko (02-12-2013)

  • #3
    New Coder
    Join Date
    Jun 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 1 Time in 1 Post
    So I'm guessing the onChange part is kind of key here?

    And would it be too much effort to change this from having the month populated already to only being populated after the user selects a year?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by Scyko View Post
    So I'm guessing the onChange part is kind of key here?

    And would it be too much effort to change this from having the month populated already to only being populated after the user selects a year?
    What is the point? Every year has the same twelve months.

    You could put the month select list in a span with visibility:hidden

    Code:
    <span id = "theMonth" style="visibility:hidden">
    <select id="month1" onchange="SelDate('day1','month1','year1');">
    //......
    </span>
    and then make it visible with in the SelDate() function:-

    Code:
    document.getElementById("theMonth").style.visibility="visible";
    }  // end of SelDate() function
    Same procedure with the day dropdown if you wanted.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Scyko (02-12-2013)

  • #5
    New Coder
    Join Date
    Jun 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 1 Time in 1 Post
    The point was that in order to enter the month, you had to enter the year. Same as it is for entering the day.. month must be entered first. Thanks for the idea of hiding them. I didn't even think of doing something like that.

    By the way, thanks for providing some awesome insight into my original problem. I'll be sure to ask you to just write the code for me next time.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here is the script modified as you request:-


    Code:
    <html>
    <head>
    
    <script  type="text/javascript">
    
    // populate the years select list
    var codeYear = "";
    codeYear += "<select id='year1' onchange=\"SelDate('day1','month1','year1');\">";
    codeYear += "<option value='--'>- Year -</option>"			 
    for (var i = 2013; i >= 1900; i--) {
    codeYear += "<option value='" + i + "' >" + i + "</option>";
    }			   
    codeYear += "</select>";
    document.write(codeYear);
    
    function SelDate(d,m,y) {
    var dy=document.getElementById(d);
    var mth=document.getElementById(m);
    var yr=document.getElementById(y);
    if (yr.value == "--") {
    yr.selectedIndex = 1;
    return false;
    }
    
    dy.options.length=1;
    if (mth.value && yr.value) {
    var days=new Date(yr.value,mth.value,1,-1).getDate(); // the first day of the next month minus 1 hour
    for (var i=1; i<=days; i++){
    dy.options[i] = new Option(i,i,true,true);
    }
    dy.selectedIndex = 0;
    }
    document.getElementById("theMonth").style.visibility="visible";
    document.getElementById("theDay").style.visibility="visible";
    
    
    }
    </script>
    </head>
    
    <body>
    
    <!--  Alternative 
    <select id="year1" onchange="SelDate('day1','month1','year1');" >
    <option >Year</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    </select>
    -->
    
    <span id = "theMonth" style="visibility:hidden">
    <select id="month1" onchange="SelDate('day1','month1','year1');">
    <option >Month</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option value="8">Aug</option>
    <option value="9">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
    </select>
    </span>
    
    <span id = "theDay" style="visibility:hidden">
    <select id="day1" >
    <option >Day</option>
    </select>
    </span>
    </body>
    
    </html>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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