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 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    161
    Thanks
    71
    Thanked 1 Time in 1 Post

    Value not changing

    Hi, having a bit of an issue with one of my select boxes not updating its values. Basically, it is supposed to show the days in a month. If Feburary is selected as the month, the day field should show 28 or 29. I have an onchange event on the day, month and year inputs. My init function which is loaded on page load looks like
    Code:
    function init() {
        setToday();      // Set global variables
        updateDisplay();
    
        document.getElementById("year").onchange = function() {
            selectedYear=this.value;
            updateDayDisplay();
            updateDayInWeekDisplay();
        }
    
        document.getElementById("month").onchange = function() {
            selectedMonth=this.value;
            updateDayDisplay();
            updateDayInWeekDisplay()
        }
    
        document.getElementById("day").onchange = function() {
            selectedDay=this.value;
            updateDayInWeekDisplay();
        }
    }
    setToday just sets all 3 fields to represent todays date. My other functions are
    Code:
    function updateDisplay() {
        // Set the value of text fields and select the correct options
        document.getElementById("year").value = selectedYear;
        updateMonthDisplay();
        updateDayDisplay();
        updateDayInWeekDisplay();
    }
    
    function updateMonthDisplay() {
        document.getElementById("month" + selectedMonth).selected = true;
    }
    
    function updateDayDisplay() {
        var elm = document.getElementById("day");
        elm.innerHTML = "";
        var daysInMonth = getDaysInMonth(selectedYear, selectedMonth);
        // The selectedDay is no longer valid. Set to the last day of month
        if (selectedDay > daysInMonth) {
            selectedDay = daysInMonth;
        }
        var options = "";
        for (var day = 1; day <= daysInMonth; day++) {
            options += "<option value='" + day + "'";
            if (day === selectedDay) {
                options += " selected";
            }
            options += ">" + day + "</option>";
        }
        elm.innerHTML = options;
    }
    
    function updateDayInWeekDisplay() {
        document.getElementById("dayInWeek").value
            = getDayInWeek(selectedYear, selectedMonth, selectedDay);
    }
    To calculate the days in a month I have
    Code:
    function isLeapYear(year) {
        return ((year % 4) === 0 && ((year % 100) !== 0 || (year % 400) === 0));
    }
    
    // Return the number of days in the given month (1-12) of the year (xxxx)
    function getDaysInMonth(year, month) {
        if (month === 2) {
            if (isLeapYear(year)) {
                return 29;
            } else {
                return 28;
            }
        } else if ((month === 1) || (month === 3) || (month === 5) || (month === 7)
            || (month === 8) || (month === 10) || (month === 12)) {
            return 31;
        } else {
            return 30;
        }
    }
    
    // Get the day of the week given year, month (1-12) and day (1-31)
    function getDayInWeek(year, month, day) {
        var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday",
            "Thursday", "Friday", "Saturday"];
        var theDate = new Date(year, month-1, day);
        return weekdays[theDate.getDay()];
    }
    Is there any reason my day field is not updating if I choose Feburary as the month? I dont see any issues with the code and I get no errors, so not to sure whats up.#

    Any advice appreciated.

    Cheers

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    February, not Feburary
    Last edited by DaveyErwin; 06-08-2014 at 06:19 PM.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,220
    Thanks
    23
    Thanked 606 Times in 605 Posts
    HTML appreciated.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    161
    Thanks
    71
    Thanked 1 Time in 1 Post
    Sorry, html pretty standard

    Code:
                        <section id="date-entry-2">
                            <form class="date-entry2" action="" method="post" name="date-entry2">
                                Year: <input type="text" name="year" id="year" size="4" maxLength="4" />
                                Month: <select name="month" id="month">
                                <option id="month1" value="1">Jan</option>
                                <option id="month2" value="2">Feb</option>
                                <option id="month3" value="3">Mar</option>
                                <option id="month4" value="4">Apr</option>
                                <option id="month5" value="5">May</option>
                                <option id="month6" value="6">Jun</option>
                                <option id="month7" value="7">Jul</option>
                                <option id="month8" value="8">Aug</option>
                                <option id="month9" value="9">Sep</option>
                                <option id="month10" value="10">Oct</option>
                                <option id="month11" value="11">Nov</option>
                                <option id="month12" value="12">Dec</option>
                            </select>
                                Day: <select name="day" id="day"></select>
                                <input type="text" name="dayInWeek" id="dayInWeek" readonly />
                            </form>
                        </section>
    Thanks

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,220
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Nothing works!

    Here's what you gave me, What's missing?
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body>
    <section id="date-entry-2">
    	<form class="date-entry2" action="" method="post" name="date-entry2">
    		Year: <input type="text" name="year" id="year" size="4" maxLength="4" />
    		Month: <select name="month" id="month">
    			<option id="month1" value="1">Jan</option>
    			<option id="month2" value="2">Feb</option>
    			<option id="month3" value="3">Mar</option>
    			<option id="month4" value="4">Apr</option>
    			<option id="month5" value="5">May</option>
    			<option id="month6" value="6">Jun</option>
    			<option id="month7" value="7">Jul</option>
    			<option id="month8" value="8">Aug</option>
    			<option id="month9" value="9">Sep</option>
    			<option id="month10" value="10">Oct</option>
    			<option id="month11" value="11">Nov</option>
    			<option id="month12" value="12">Dec</option>
    		</select>
    		Day: <select name="day" id="day"></select>
    		<input type="text" name="dayInWeek" id="dayInWeek" readonly />
    	</form>
    </section>
    
    
    <script type="text/javascript">
    function init() {
        setToday();      // Set global variables
        updateDisplay();
    
        document.getElementById("year").onchange = function() {
            selectedYear=this.value;
            updateDayDisplay();
            updateDayInWeekDisplay();
        }
    
        document.getElementById("month").onchange = function() {
            selectedMonth=this.value;
            updateDayDisplay();
            updateDayInWeekDisplay()
        }
    
        document.getElementById("day").onchange = function() {
            selectedDay=this.value;
            updateDayInWeekDisplay();
        }
    }
    function updateDisplay() {
        // Set the value of text fields and select the correct options
        document.getElementById("year").value = selectedYear;
        updateMonthDisplay();
        updateDayDisplay();
        updateDayInWeekDisplay();
    }
    
    function updateMonthDisplay() {
        document.getElementById("month" + selectedMonth).selected = true;
    }
    
    function updateDayDisplay() {
        var elm = document.getElementById("day");
        elm.innerHTML = "";
        var daysInMonth = getDaysInMonth(selectedYear, selectedMonth);
        // The selectedDay is no longer valid. Set to the last day of month
        if (selectedDay > daysInMonth) {
            selectedDay = daysInMonth;
        }
        var options = "";
        for (var day = 1; day <= daysInMonth; day++) {
            options += "<option value='" + day + "'";
            if (day === selectedDay) {
                options += " selected";
            }
            options += ">" + day + "</option>";
        }
        elm.innerHTML = options;
    }
    
    function updateDayInWeekDisplay() {
        document.getElementById("dayInWeek").value
            = getDayInWeek(selectedYear, selectedMonth, selectedDay);
    }
    function isLeapYear(year) {
        return ((year % 4) === 0 && ((year % 100) !== 0 || (year % 400) === 0));
    }
    
    // Return the number of days in the given month (1-12) of the year (xxxx)
    function getDaysInMonth(year, month) {
        if (month === 2) {
            if (isLeapYear(year)) {
                return 29;
            } else {
                return 28;
            }
        } else if ((month === 1) || (month === 3) || (month === 5) || (month === 7)
            || (month === 8) || (month === 10) || (month === 12)) {
            return 31;
        } else {
            return 30;
        }
    }
    
    // Get the day of the week given year, month (1-12) and day (1-31)
    function getDayInWeek(year, month, day) {
        var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday",
            "Thursday", "Friday", "Saturday"];
        var theDate = new Date(year, month-1, day);
        return weekdays[theDate.getDay()];
    }
    </script>
    </body>
    
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    161
    Thanks
    71
    Thanked 1 Time in 1 Post
    Sorry, here you go
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
        <title>Title of the document</title>
    </head>
    
    <body>
    <section id="date-entry-2">
        <form class="date-entry2" action="" method="post" name="date-entry2">
            Year: <input type="text" name="year" id="year" size="4" maxLength="4" />
            Month: <select name="month" id="month">
            <option id="month1" value="1">Jan</option>
            <option id="month2" value="2">Feb</option>
            <option id="month3" value="3">Mar</option>
            <option id="month4" value="4">Apr</option>
            <option id="month5" value="5">May</option>
            <option id="month6" value="6">Jun</option>
            <option id="month7" value="7">Jul</option>
            <option id="month8" value="8">Aug</option>
            <option id="month9" value="9">Sep</option>
            <option id="month10" value="10">Oct</option>
            <option id="month11" value="11">Nov</option>
            <option id="month12" value="12">Dec</option>
        </select>
            Day: <select name="day" id="day"></select>
            <input type="text" name="dayInWeek" id="dayInWeek" readonly />
        </form>
    </section>
    
    
    <script type="text/javascript">
        window.onload = init;
    
        // Global variables for the currently selected year, month and day
        var selectedYear;   // 4-digit year
        var selectedMonth;  // 1 to 12 for Jan to Dec
        var selectedDay;    // 1 to 31
    
        // The "onload" handler, runs after the page is fully loaded.
        function init() {
            setToday();      // Set global variables
            updateDisplay();
    
            document.getElementById("year").onchange = function() {
                selectedYear=this.value;
                updateDayDisplay();
                updateDayInWeekDisplay();
            }
    
            document.getElementById("month").onchange = function() {
                selectedMonth=this.value;
                // In case the current day is no longer valid, e.g., 31 in Feb.
                // Set to the last year of the month
                updateDayDisplay();
                updateDayInWeekDisplay()
            }
    
            document.getElementById("day").onchange = function() {
                selectedDay=this.value;
                updateDayInWeekDisplay();
            }
    
        }
    
        // Set global variable selectedYear, selectedMonth and selectedDay
        // to today.
        function setToday() {
            var now = new Date();
            selectedYear = now.getFullYear();   // 4-digit year
            selectedMonth = now.getMonth() + 1; // 1 to 12 for Jan to Dec
            selectedDay = now.getDate();        // 1 to 31
        }
    
        // Update the year, month, day and day-in-week display according
        // to the selected values.
        function updateDisplay() {
            // Set the value of text fields and select the correct options
            document.getElementById("year").value = selectedYear;
            updateMonthDisplay();
            updateDayDisplay();
            updateDayInWeekDisplay();
        }
    
        function updateMonthDisplay() {
            document.getElementById("month" + selectedMonth).selected = true;
        }
    
        function updateDayDisplay() {
            var elm = document.getElementById("day");
            elm.innerHTML = "";
            var daysInMonth = getDaysInMonth(selectedYear, selectedMonth);
            // The selectedDay is no longer valid. Set to the last day of month
            if (selectedDay > daysInMonth) {
                selectedDay = daysInMonth;
            }
            var options = "";
            for (var day = 1; day <= daysInMonth; day++) {
                options += "<option value='" + day + "'";
                if (day === selectedDay) {
                    options += " selected";
                }
                options += ">" + day + "</option>";
            }
            elm.innerHTML = options;
        }
    
        function updateDayInWeekDisplay() {
            document.getElementById("dayInWeek").value
                    = getDayInWeek(selectedYear, selectedMonth, selectedDay);
        }
        function isLeapYear(year) {
            return ((year % 4) === 0 && ((year % 100) !== 0 || (year % 400) === 0));
        }
    
        // Return the number of days in the given month (1-12) of the year (xxxx)
        function getDaysInMonth(year, month) {
            if (month === 2) {
                if (isLeapYear(year)) {
                    return 29;
                } else {
                    return 28;
                }
            } else if ((month === 1) || (month === 3) || (month === 5) || (month === 7)
                    || (month === 8) || (month === 10) || (month === 12)) {
                return 31;
            } else {
                return 30;
            }
        }
    
        // Get the day of the week given year, month (1-12) and day (1-31)
        function getDayInWeek(year, month, day) {
            var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday",
                "Thursday", "Friday", "Saturday"];
            var theDate = new Date(year, month-1, day);
            return weekdays[theDate.getDay()];
        }
    </script>
    </body>
    
    </html>

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    I think you are making it too complicated.
    The Date function can give you the number
    of days in a month, no need to calculate leap
    years because the date function already knows.

    Look this over and try it out and please ask questions.


    Code:
    <!DOCTYPE html>
    <head>
        <meta charset="UTF-8" >
        <title>Title of the document</title>
    </head>
    <body>
    <section id="date-entry-2">
        
            Year: <input type="text" id="year" size="4" maxLength="4" >
            Month: <select id="month"> 
            <option value="0">Jan</option>
            <option value="1">Feb</option>
            <option value="2">Mar</option>
            <option value="3">Apr</option>
            <option value="4">May</option>
            <option value="5">Jun</option>
            <option value="6">Jul</option>
            <option value="7">Aug</option>
            <option value="8">Sep</option>
            <option value="9">Oct</option>
            <option value="10">Nov</option>
            <option value="11">Dec</option>
        </select>
            Day: <select id="day"></select>
            <input type="text" id="dayInWeek" readonly />
        
    </section>
    <script>
    days=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
    var now = new Date();
    update(now)
    function update(now){
     year.value=now.getFullYear();
     month.selectedIndex=now.getMonth();
     dayInWeek.value=days[now.getDay()];
     theDay=now.getDate();
     now.setMonth(now.getMonth()+1,0);
     daysInMonth=now.getDate();
     day.options.length=0;
     day.add(new Option(" "," "));
     for(var i=1;i<=daysInMonth;i++){
      day.add(new Option(i,i));
     }
     day.selectedIndex=theDay;
    }
    year.onchange=month.onchange=function(){
     update(new Date(year.value,month.selectedIndex,1))
     day.selectedIndex=0;
     dayInWeek.value="";
    }
    day.onchange=function(){
     if (day.selectedIndex)
      update(new Date(year.value,month.selectedIndex,day.selectedIndex));
     else dayInWeek.value="";
    }
    </script>
        </body>
    </html>

  • Users who have thanked DaveyErwin for this post:

    nick2price (06-09-2014)

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    161
    Thanks
    71
    Thanked 1 Time in 1 Post
    Thank you for the reply. Unfortunately, I have no idea why, but I am not allowed to use the date function in order to return the leap years. The formula to calculate it is pretty simple anyway. I have figured out that my getDaysInMonth, when I do alerts, the month is the correct value everytime, but it always outputs 30

    Code:
    function getDaysInMonth(year, month) {
        alert(month);
        if (month === 2) {
            if (isLeapYear(year)) {
                return 29;
            } else {
                return 28;
            }
        } else if ((month === 1) || (month === 3) || (month === 5) || (month === 7)
            || (month === 8) || (month === 10) || (month === 12)) {
            alert("31");
            return 31;
        } else {
            alert("30");
            return 30;
        }
    }
    If I change the comparisons to == instead of ===, it works. The only thing I can think of is because the month value comes from a select e.g.
    Code:
    <option id="month1" value="1">Jan</option>
    The value here is not considered an int? If I parseInt the month, === works.

  • #9
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,294
    Thanks
    13
    Thanked 345 Times in 341 Posts
    Quote Originally Posted by nick2price View Post
    If I change the comparisons to == instead of ===, it works. The only thing I can think of is because the month value comes from a select
    you eventually found out that the DOM always gives you string values.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Posting Permissions

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