Lo siento si mi título es difícil de entender.
Tengo varios campos llamados fecha1, fecha2... Al cambiar esos campos, quiero que se ejecute un script completo. Hoy, simplemente copié el código para cada fecha que tengo.
Me gustaría tener un código más limpio y usar el siguiente selector de JQuery:
$("input[id^=date]")El problema al que me enfrento es que no sé cómo reutilizar el elemento seleccionado en el código posterior. Lo he intentado con $(this) pero no funciona, ya que parece no estar definido.
Editar: según lo solicitado, muestro un ejemplo con $ (esto). La variable día permanece vacía. Funciona si uso el mismo selector que para mes y año. El ejemplo completo no usa $(this) todavía, pero es para mostrar que mi $(this) no funciona.
$("#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>Gracias
Úsalo así:
$('input[type=date]').click(function() { var fields = $(this); // do something with it return false; });