Event listener is not working for textbox

user_13245271 0
Viewed 258

I have just started learning javascript and html.

I have an issue with the EventListener in which it does not seems to be functioning at all. In my code, I have a textbox for users to enter in a date value in the format of DD/MM/YYYY. The overall code works, ie. the day/month/year checking, however I thought of adding in advanced functionality such as auto-inserting the slashes.

Having refer to Javascript input that automatically adds '/' to a date for help, the solution within the question answers to my cause, but as soon as I copied it to my code, the auto-slashes are not working at all.

Initially I have thought it could be the onChange that could be causing the issue, I tried removing it, still the same issue.

Here is my code

<!DOCTYPE html>

<html>

    <title> Date Test</title>
    <script type="text/javascript">

        function checkDob()
        {
            var dobInput = document.getElementById("dobTxt").value;
            var dobData = dobInput.split("/");
            
            var day = dobData[0];
            var month = dobData[1];
            var year = dobData[2];

            if (checkMonth(month))
                checkDay(day, month, year);
        }

        function checkDay(dayValue, monthValue, yearValue)
        {
            
            if (dayValue<1 || dayValue>28)
            {
                alert("only have 28 days");
            }

            // For months - April, June, September, November
            // Only have 30 days
            if (monthValue==4 || monthValue==6 || monthValue==9 || monthValue==11)
            {
                if (dayValue<1 || dayValue>30)
                {
                    alert("only have 30 days");
                }
            }
            else
            {
                // All other months only have 31 days
                if (dayValue<1 || dayValue>30)
                {
                    alert("only have 31 days");
                }
            }
        }

        function checkMonth(monthValue)
        {
            if (monthValue<1 || monthValue>12)
            {
                alert("Invalid month value. Please re-enter between 1 to 12.");
                return false;
            }
            return true;
        }

        var dob = document.getElementById("dobTxt");
        dob.addEventListener("keydown", setDate);
        function setDate() {
            dob.value = dob.value.replace(/^(\d\d)(\d)$/g,"$1-$2").replace(/^(\d\d\-\d\d)(\d+)$/g,"$1-$2").replace(/[^\d\-]/g,'');
        }

    </script>

    <body>

        <form id="form">

            <!-- DOB Element -->
            <label>Date of Birth</label>
            <input id="dobTxt" name="birthdate" type="text" maxlength="10"placeholder="DD/MM/YYYY" onchange="checkDob()" />
            <br>

        </form>
    </body>

</html>

Do I need to do something to enable the event listener functionality? I am running my html using Google Chrome, also tried in other browsers, same issue encountered.

Many thanks in advance if anyone could shed some light on it.

event-listener addeventlistener javascript
1 Answers

A slight change to your replace and your validator (to split by '/') and it seems to be working.

function checkDob() {
  var dobInput = document.getElementById("dobTxt").value;
  var dobData = dobInput.split("/");

  var day = dobData[0];
  var month = dobData[1];
  var year = dobData[2];

  if (checkMonth(month))
    checkDay(day, month, year);
}

function checkDay(dayValue, monthValue, yearValue) {
  console.log(dayValue, monthValue, yearValue)

  if (dayValue < 1 || dayValue > 28) {
    alert("only have 28 days");
  }

  // For months - April, June, September, November
  // Only have 30 days
  if (monthValue == 4 || monthValue == 6 || monthValue == 9 || monthValue == 11) {
    if (dayValue < 1 || dayValue > 30) {
      alert("only have 30 days");
    }
  } else {
    // All other months only have 31 days
    if (dayValue < 1 || dayValue > 30) {
      alert("only have 31 days");
    }
  }
}

function checkMonth(monthValue) {
  console.log('monthValue', monthValue)
  if (monthValue < 1 || monthValue > 12) {
    alert("Invalid month value. Please re-enter between 1 to 12.");
    return false;
  }
  return true;
}


function setDate() {
const dob = document.getElementById("dobTxt")
  dob.value = dob.value.replace(/^(\d\d)(\d)$/g, "$1/$2").replace(/^(\d\d\/\d\d)(\d+)$/g, "$1/$2").replace(/[^\d\/]/g, '');
}

// set the eventlistener after the page loads
window.onload = function() {
 const dob = document.getElementById("dobTxt")
  dob.addEventListener("keydown", setDate);
}
<form id="form">

  <!-- DOB Element -->
  <label>Date of Birth</label>
  <input id="dobTxt" name="birthdate" type="text" maxlength="10" placeholder="DD/MM/YYYY" onchange="checkDob()" />
  <br>

</form>

user_17729330
Related