Develop Reference

How to check when input value is changed?

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);
}

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="">

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'
}

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.

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.

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>

JQuery unable to get value from dynamically added Inputs

I have this script here that I intend to run:
<script>
$(document).ready(function () {
var sd = $("#StartDate").val();
var ed = $("#EndDate").val();
$("#userReportGenerate").click(function (e) {
e.preventDefault();
console.log(sd);
console.log(ed);
$("<input/>").attr("type", "hidden").attr("id", "uStartDate").attr("name", "StartDate").attr("value", sd).appendTo("userReportForm");
$("<input/>").attr("type", "hidden").attr("id","uEndDate").attr("name", "EndDate").attr("value", ed).appendTo("userReportForm");
console.log($("#uStartDate").val());
return false;
});
});
</script>
However, when I click on the button, I get no value for the uStartDate ID. It just appears as blank on my console.
Is it possible to get the value from this input?
I intend to pass the StartDate and EndDate alongside my form when I submit it.

$(document).ready(function () {
var sd = $("#StartDate").val();
var ed = $("#EndDate").val();
$("#userReportGenerate").click(function (e) {
e.preventDefault();
let uStartDate='<input type="hidden" id="uStartDate" name="StartDate" value="'+sd+'">';
$('#userReportForm').append(uStartDate);
return false;
});
});

Bootstrap Date Paginator datepicker

I would like to make redirect when a date is changed and transmit selected date parameter (via window.location.href). I'm using Bootstrap Date Paginator, which contains Bootstrap datepicker, but I don't know how to change these lines of code to work properly:
this.$calendar
.datepicker({
options...
})
.datepicker('update', this.options.selectedDate.toDate())
.on('changeDate', $.proxy(this._calendarSelect, this));
I know I would use changeDate event but there aren't any examples of using this event. Can you help me, please?

Would this do?
You can use .on('change', ..) like this,
this.$calendar
.datepicker({
options...
}).on('change', function() {
var changedDate = this.$calendar.val();
//alert("value of date is "+ x);
var theUrl = 'your URL';
window.location.href = theUrl+"date="changedDate
});
Else use, on('change.dp', ..) event like this,
this.$calendar
.datepicker({
options...
}).on('change.dp', function() {
var changedDate = this.$calendar.val();
//alert("value of date is "+ x);
var theUrl = 'your URL';
window.location.href = theUrl+"date="changedDate
});
Alternatively have a look at this too.

May be it's too late, but I have same problem and come up with this solution,
while setting options for Bootstrap Date Paginator keep track of onSelectedDateChanged function and assign the date value to a variable and send that variable to location.href.
<script>
var currDate = new Date();
var options = {
selectedDateFormat: 'DD/MM/YYYY',
selectedDate: moment(currDate).format('DD/MM/YYYY'),
onSelectedDateChanged: function (event, date) {
var dateSelected = moment(date).format('DD/MM/YYYY');
location.href = '/ServletName?timestamp='+currDate .getTime() + "&date=" + dateSelected ;
},
};
$('#paginator').datepaginator(options);
</script>
<body>
<div id="paginator"></div>
</body>

.clone doesn't not appear to be incrementing

this script is suppose to clone a new row of a HTML table. It does not seem to be incrementing the name, id, attributes. What am I doing wrong? The only other thing that is not working is get the value from the previous input id of #endtime_* and putting it in the cloned input id of #starttime_* although I think that is because it does seem to be incrementing as it clones a row.
<script type="text/javascript">
function MaskTime(){
var index = $("#TimeCard tbody>tr").length-1;
$('#endtime_'+index).mask("99:99 aa");
$('#starttime_'+index).mask("99:99 aa");
}
function update_rows(){
$("#TimeCard tbody>tr:odd").css("background-color", "#FFF");
$("#TimeCard tbody>tr:even").css("background-color", "#999");
}
$(document).ready(function() {
$("#addrow").click(function() {
var row = $('#TimeCard tbody>tr:last').clone(true).insertAfter('#TimeCard tbody>tr:last');
var index = $("#TimeCard tbody>tr").length-1;
var endvalue = $('#endtime_'+index-1).val();
$("td:eq(0) select").attr("name", 'type_'+index).attr("id", 'type_'+index).addClass("validate[required]").val('')
$("td:eq(1)").html(" ")
$("td:eq(2) select").attr("name", 'propid_'+index).attr("id", 'propid_'+index).addClass("validate[required]").val('')
$("td:eq(3)").html(" ")
$("td:eq(4) input").attr("name", 'starttime_'+index).attr("id", 'starttime_'+index).addClass("validate[required,custom[timeclock]]").val(endvalue)
$("td:eq(5) input").attr("name", 'endtime_'+index).attr("id", 'endtime_'+index).addClass("validate[required,custom[timeclock]]").val('')
$("td:eq(6)").html(" ")
update_rows();
MaskTime();
return false;
});
});
</script>

For the first part of your question:
It does not seem to be incrementing the name, id, attributes.
Your script isn't giving the proper context for where the tds are for which you want to modify the attribues, etc.
Here's a modification that corrects that, adding a new variable "newrow" (to reduce DOM calls) and modifying the lines of code related to td:eq(#)...
$(document).ready(function() {
$("#addrow").click(function() {
var row = $('#TimeCard tbody>tr:last').clone(true).insertAfter('#TimeCard tbody>tr:last');
var index = $("#TimeCard tbody>tr").length-1;
var endvalue = $('#endtime_'+index-1).val();
var newrow = $("#TimeCard tbody>tr:last");
newrow.children("td:eq(0)").children("select").attr("name", 'type_'+index).attr("id", 'type_'+index).addClass("validate[required]").val('')
newrow.children("td:eq(1)").html(" ")
newrow.children("td:eq(2)").children("select").attr("name", 'propid_'+index).attr("id", 'propid_'+index).addClass("validate[required]").val('')
newrow.children("td:eq(3)").html(" ")
newrow.children("td:eq(4)").children("input").attr("name", 'starttime_'+index).attr("id", 'starttime_'+index).addClass("validate[required,custom[timeclock]]").val(endvalue)
newrow.children("td:eq(5)").children("input").attr("name", 'endtime_'+index).attr("id", 'endtime_'+index).addClass("validate[required,custom[timeclock]]").val('')
newrow.children("td:eq(6)").html(" ")
update_rows();
MaskTime();
return false;
});
});
Also, I'd made a jsfiddle with the above: http://jsfiddle.net/m78UN/2/
I'm not following what you're wanting when you describe your second problem:
The only other thing that is not working is get the value from the previous input id of #endtime_* and putting it in the cloned input id of #starttime_*
...so I've not attempted to address that.

I think you can do everything you're doing in a way simpler way. I don't have your original HTML, but check this out as a possible alternative. It mainly does 3 things:
Removed IDs used for finding things
Caches selectors
Adds classes to time inputs to make them easier to reference
Removed MaskTime() function
Here's the code:
$(document).ready(function() {
var $timecard = $("#TimeCard");
var $tbody = $timecard.find("tbody");
var $rows = $tbody.children("tr");
$("#addrow").click(function(e) {
e.preventDefault(); // clearer than return false
var $lastRow = $tbody.find("tr:last-of-type");
var lastEnd = $lastRow.find(".endTime").val();
var $newRow = $lastRow.clone(true).appendTo($tbody);
var $cols = $newRow.find("td");
var index = $rows.length - 1;
$cols.eq(0).find("select").attr("name", 'type_' + index).addClass("validate[required]").val('');
$cols.eq(1).empty();
$cols.eq(2).find("select").attr("name", 'propid_' + index).addClass("validate[required]").val('');
$cols.eq(3).empty();
$cols.eq(4).find("input").attr("name", 'starttime_' + index).addClass("time startTime validate[required,custom[timeclock]]").val(lastEnd);
$cols.eq(5).find("input").attr("name", 'endtime_' + index).addClass("time endTime validate[required,custom[timeclock]]").val('');
$cols.eq(6).empty();
update_rows(); // no idea what this is
$newRow.find(".time").mask("99:99 aa"); // MaskTime() just did this
});
});

OnClick event, show pop-up or focus on textbox to add comment

What I'm trying to achieve is the following. I'm (still) working on a timesheet, and the user has to be able to add a comment.
Comment [ .................. ] for D2
TaskID - Taskname - D1 - D2 - D3 ...
1 Hello 5 3 2
2 Bai 4 2 1
3 I'm back 3 4 3
When a user clicks on a specific textbox, where he has to fill in the hours, an additional textbox should get the comment value of that specific box. When he clicks on another textbox, it should get that value etc, etc.
I don't really know where to look for, or how I could do it best. Any ideas? Javascript? JQuery? I'm currently working with Spring MVC, so it should get the value and add it to a specific modelattribute so it can be submitted.
Another possibility is some kind of pop-up, which appears when you click on an icon next to the textbox...

I used Javascript to realize this.
Once you enter a certain field, I call a function to fill the commentary with a new classname:
<input type="text" onfocus='addComment(id, index, taskid)' />
Function:
function addComment(classname, commValue, taskid){
var comm = document.getElementById('comment');
var comment = document.getElementById(taskid + classname);
comm.className = taskid + classname;
comm.value = comment.value;
}
This will fill the textbox with the value from the latest focused textbox. It will also set the classname using the provided one.
To save the commentary value, I use jQuery Ajax:
function saveComment(){
var comment = document.getElementById('comment');
var classn = comment.className;
var firstday = document.getElementById('firstweek').value;
var commentval = comment.value;
var windex = comment.className.indexOf("w");
var day = comment.className.substring(windex+1, windex+2);
var taskid = comment.className.substring(0, windex);
var pid = document.getElementById('projectid').value;
if (classn != ""){
var commentSaved = document.getElementById(taskid+comment.className.substring(windex, windex+2));
commentSaved.value = commentval;
$.post("savecomm.html", { day: day, comment: commentval, taskid: taskid, firstday: firstday, pid: pid }, function(data) {
alert("callback");
});
} else {
alert("No entries selected");
}
}