How to check when input value is changed?

Question

How can i check when a value on input is changed.

I have a calendar and when i click on calendar it changes the value on input , but when im trying to see if it has changed its not working. i have tried AddEventListener, also jquery on change, also i sent a function on change to call it but none of them is working.

  <input type="text" id="date" class="date" onchange="changed()" name="" >
   function changed(){
      alert("hello world");
    }

Main js file for creating the calendar : This function creates the calendar on my php file . And then when on click it gets the value on the input with id #date But When im trying to see if value has changed it is not working .

// Initialize the calendar by appending the HTML dates
function init_calendar(date) {
    $(".tbody").empty();
    $(".events-container").empty();
    var calendar_days = $(".tbody");
    var month = date.getMonth();
    var year = date.getFullYear();
    var day_count = days_in_month(month, year);
    var row = $("<tr class='table-row'></tr>");
    var today = date.getDate();
    // Set date to 1 to find the first day of the month
    date.setDate(1);
    var first_day = date.getDay();
    // 35+firstDay is the number of date elements to be added to the dates table
    // 35 is from (7 days in a week) * (up to 5 rows of dates in a month)
    for(var i=0; i<35+first_day; i++) {
        // Since some of the elements will be blank, 
        // need to calculate actual date from index
        var day = i-first_day+1;
        // If it is a sunday, make a new row
        if(i%7===0) {
            calendar_days.append(row);
            row = $("<tr class='table-row'></tr>");
        }
        // if current index isn't a day in this month, make it blank
        if(i < first_day || day > day_count) {
            var curr_date = $("<td class='table-date nil'>"+"</td>");
            row.append(curr_date);
        }   
        else { 
            var monthplusone = months[month];
            var curr_date = $("<td  class='table-date' id='"+day+"-"+monthplusone+"-"+year+"'>"+day+"</td>");
            var events = check_events(day, month+1, year);
            if(today===day && $(".active-date").length===0) {
                curr_date.addClass("active-date");
                let x = document.getElementById('date').value=day+"-"+monthplusone+"-"+year;
    
                 $('.table-date').ready(function () {
                   x.value;
                  });
                show_events(events, months[month], day);
            }
            // If this date has any events, style it with .event-date
            if(events.length!==0) {
                curr_date.addClass("event-date");
            }
            // Set onClick handler for clicking a date
            $('.table-date').on('click', function () {
              document.getElementById('date').value = $(this).attr('id');
            });
            curr_date.click({events: events, month: months[month], day:day}, date_click);
            row.append(curr_date);
        }
    }
    // Append the last row and set the current year
    calendar_days.append(row);
    $(".year").text(year);
}

Answer 1

This works. Not sure where you're running into an issue.

 function changed(){
    console.log("hello world");
 }

 <input type="text" id="date" class="date" onchange="changed()" name="" >

EDIT: Shortened version of init_calender() for others interested in answering:

function setDate() {
    document.getElementById("date").value = '19-Dec-2021'
}

Answer 2

Notice that change is actually triggered when the input is not focused anymore.

document.getElementById("date").addEventListener("change", function () {
        alert("hello world");
    });

<input type="text" id="date" class="date" name="">

Answer 3

I basically agree with @Spankied in that you should try and shorten your code to the point where you are having the issue. However, after looking at your code it seems to me that you want the following function

$('.table-date').on('click', function () {
  document.getElementById('date').value = $(this).attr('id');
});

to not only change the value in your #date input but also trigger its change event-handler function. You can do that by changing it to something like

$('.table-date').on('click', function () {
  document.getElementById('date').value = $(this).attr('id');
  $("#date" ).change();
});

jQuery.change() without any arguments will trigger a predefined "change"-event on the DOM-object that is selected by the jQuery-object.

Answer 4

You can use js to do that:

let x = $(...) //select the input box
let val = x.value;
function repeat() {
if (val !== x.value) {
change()
}
}
setInterval(repeat, 100)

This checks if the result is the same.

Answer 5

This might make your site a bit slow and it might look odd but this will work in just every case

<script>
    let Oldvalue = $('.date')[0].val();
    setInterval(() => {
         let currentValue = $('.data')[0].val()
         if (Oldvalue != currentValue){ 
             //do whatever but in end write this 
             Oldvalue = currentValue;
         }
    }, 10);
</script>