Sorry if my title is difficult to understand.
I've multiple fields named date1, date2... On Change of those fields, I want a full script to run. Today, I have simply copied the code for each dateN I have.
I would like to have a cleaner code and use the next JQuery selector:
$("input[id^=date]")
The problem I face is that I don't know how to reuse the selected element into the subsequent code. I've tried with $(this) but it doesn't work, as it seems to be undefined.
Edit: as requested I show an example with $(this). The variable day stays empty. It works if I use the same selector as for month and year. The full example doesn't use $(this) yet but it's to show that my $(this) doesn't work.
$("#date1").on("change", () => {
// Check validity of the date
const regexDate = /\d{2}\/\d{2}\/\d{4}/gm;
if (regexDate.test($("#date1").val()) == false) {
// Date format not valid, we quit the function
$("#info1").removeAttr("title");
$("#info1").hide();
return;
}
//Slice date
var day = $(this).val().substring(0, 2);
var month = $("#date1").val().substring(3, 5);
var year = $("#date1").val().substring(6, 10);
$.get("http://192.168.1.6:3000/getDateHistory/" + day + "/" + month + "/" + year, (data) => {
data = JSON.parse(data);
// Only display if not empty
if (data.length > 0) {
historyOfSameDate = "Other records exist at the same date: ";
for (var i = 0; i < data.length; i++) {
historyOfSameDate += data[i].desc + " - " + data[i].amount;
if (i < data.length - 1) {
historyOfSameDate += " | "
};
}
$("#info1").attr({
"title": historyOfSameDate
});
$("#info1").show();
} else {
$("#info1").removeAttr("title");
$("#info1").hide();
}
});<tr>
<td><input class="form-control datepicker" id="date1" placeholder="Enter date"></td>
<td style="vertical-align:middle;"><i id="info1" class="bi bi-info-square-fill"></i></td>
<td>
<select class="form-control" id="type1" placeholder="Enter type">
<option value=""></option>
</select>
</td>
<!-- Options dynamically created -->
<td><input class="form-control" id="desc1" placeholder="Enter description"></td>
<td><input class="form-control" id="amount1" placeholder="Enter amount"></td>
<td>
<select class="form-control" id="payer1" placeholder="Enter type">
<option value=""></option>
</select>
</td>
<!-- Options dynamically created -->
<td>
<select class="form-control" id="paymentsource1" placeholder="Enter type">
<option value=""></option>
</select>
</td>
<!-- Options dynamically created -->
<td style="vertical-align:middle; color:orange;"><i id="warning1" class="bi bi-exclamation-triangle-fill" title="This record will be ignored because it either doesn't contain enough information or contains error(s)."></i></td>
</tr>
<tr>
<td><input class="form-control datepicker" id="date2" placeholder="Enter date"></td>
<td style="vertical-align:middle;"><i id="info2" class="bi bi-info-square-fill"></i></td>
<td>
<select class="form-control" id="type2" placeholder="Enter type">
<option value=""></option>
</select>
</td>
<!-- Options dynamically created -->
<td><input class="form-control" id="desc2" placeholder="Enter description"></td>
<td><input class="form-control" id="amount2" placeholder="Enter amount"></td>
<td>
<select class="form-control" id="payer2" placeholder="Enter type">
<option value=""></option>
</select>
</td>
<!-- Options dynamically created -->
<td>
<select class="form-control" id="paymentsource2" placeholder="Enter type">
<option value=""></option>
</select>
</td>
<!-- Options dynamically created -->
<td>Thank you
Use it like this:
$('input[type=date]').click(function() {
var fields = $(this);
// do something with it
return false;
});