How to get the value of the month to the database

Question

I have this function, that gives the user the correct amount of buttons depending on the month. So if the user loads the page, Februari will show up, and 28 buttons aswell. If the user changes to March, there will be 31 buttons. The user is able to click on the button, and the corresponding button will be added to the mySql database. So if the user chooses Februari, and the button 3, the value in the database will say 2018-02-03. The problem is, and what I need help with, is if the user changes the month on the page, it does not change the value in the database. The month value in the database is always the current month of the year. Tried different solutions but nothing works. The value of the month is in a h2 with the id "displayingMonth".

Function:

  function drawTable(daysInMonth) {
          var cellsToDraw = daysInMonth;
          var table = document.getElementById("table");
          var dateObj = new Date();
            var month = dateObj.getMonth()+1;
            var day = dateObj.getDate();
            var year = dateObj.getFullYear();
            newdate = year + "-" + month;
            table.innerHTML = "";
          for (r = 0; r < (daysInMonth / 7); r++) {
            var newRow = document.createElement("tr");
            table.appendChild(newRow);
            for (c = 0; c < 31 && cellsToDraw > 0; c++) {
            v = c +1;
            //var newCell = document.createElement("td");
              var newCell = document.createElement("input");
              newCell.setAttribute("type", "radio");
              newCell.setAttribute("name", "day");
              newCell.setAttribute("value", newdate + "-" + v);
              newRow.appendChild(newCell);
              newCell.innerHTML = 
              cellsToDraw--;
            }
          }
        }

to get the month displayed:

function daysInMonth(month, year) {
     var days;
     switch (month) {
       case 1: 
       var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
       days = leapYear ? 29 : 28;
       break;
       case 3:
       case 5:
       case 8:
       case 10:
       days = 30;
       break;
       default:
       days = 31;
      }
      return days;
    }

To get the month:

 window.onload = function() {
    var month = new Date();
    var index = month.getMonth();
    var months = ["Januari", "Februari", "March", "April", "May", "June", "July", "Augusti", "September", "October", "November", "December"];
    document.getElementById("todayField").innerHTML = months[month.getMonth()];
    // Draws a table for the current month
    drawTable(daysInMonth(index, 2018));
    }

to get the next month

   function next() {
        var months = ["Januari", "Februari", "March", "April", "May", "June", "July", "Augusti", "September", "October", "November", "December"];
        var weeks = ["Sunday", "Monday", "Tuseday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var nextMonth = index + 1 > 11 ? 0 : index + 1;
        index = nextMonth;
        document.getElementById("displayingMonth").innerHTML = months[nextMonth];
        drawTable(daysInMonth(index, 2018));
      }

HTML

  <input id="newCell"type="hidden"name="day" value="">

All help is appriciated!

Answer 1

Alright, some slight adjustments here. This is highly specific to your code, so bear with the changes. The issue lies with the use of var dateObj = new Date(); and then pulling the month from it to add to each 'day' radio input a user chooses.

Each input is using the 'current date' for that, and thus pulls the wrong month for what its passing.

Instead, you'll need to push the selected month date into the drawTable function, so it can build properly from that. And example of such would be:

function drawTable(daysInMonth,selectedMonth) {
    ...
    // selectedMonth has the proper index for the Date() function
    // setting 2018 here, because your code isnt inc years yet
    var dateObj = new Date(2018, selectedMonth, 1, 0, 0, 0, 0);
    ...
}

window.onload = function() {
    ...
    drawTable(daysInMonth(index, 2018), month.getMonth());
}

function next() {
    // you may want to deal with looping to the next year here too
    ...
    drawTable(daysInMonth(index, 2018), nextMonth);// nextMonth holds proper index
}

I think I should note that this passes the "month index", because new Date() takes a month index of 0 - 11. So passing it straight from a .getMonth() is the most compatible (no need to add +1 or -1 to them).

---

Here is also full chunk of your code with many changes applied to reduce some complexity and allow for years to roll as next month loops. There are a lot of changes in here, but mainly, it relies a lot more on the Date() object. No need for the daysInMonth() function you have.

// set as global
var showDate = new Date();
var months = ["Januari", "Februari", "March", "April", "May", "June", 
              "July", "Augusti", "September", "October", "November", "December"];
var weeks = ["Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday"];

function drawTable(forDate) {
    var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
    // ^^^ magic way to get number of days!
    var cellsToDraw = daysInMonth;
    // for a zero-padded non-index YYYY-MM prefix value:
    var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
    var table = document.getElementById("table");
    table.innerHTML = "";
    for (var r = 0; r < (daysInMonth / 7); r++) {
        var newRow = document.createElement("tr");
        table.appendChild(newRow);
        for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
            // for a zero-padded day to tack onto newdate
            var day = ("0" + (c + 1)).slice(-2);
            var newCell = document.createElement("input");
            newCell.setAttribute("type", "radio");
            newCell.setAttribute("name", "day");
            newCell.setAttribute("value", newdate + "-" + day);// makes YYYY-MM-DD
            newRow.appendChild(newCell);
            newCell.innerHTML = '';
            cellsToDraw--;
        }
    }
}

window.onload = function() {
    document.getElementById("todayField").innerHTML = months[showDate.getMonth()];
    drawTable( showDate );
};

function next() {
    if (showDate.getMonth() == 11) {
        showDate.setMonth( 0 );
        showDate.setFullYear( showDate.getFullYear()+1 );
    } else {
        showDate.setMonth( showDate.getMonth()+1 );
    }
    document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
    drawTable( showDate );
}

function prev() {
    if (showDate.getMonth() === 0) {
        showDate.setMonth( 11 );
        showDate.setFullYear( showDate.getFullYear()-1 );
    } else {
        showDate.setMonth( showDate.getMonth()-1 );
    }
    document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
    drawTable( showDate );
}