Estoy usando JS para pasar datos a Python. Primero, cuando se carga el HTML, quiero recopilar los valores y esto funciona, el problema es que cuando el valor cambia, no cambia.
Disculpe, soy bastante nuevo en JS. Aquí está mi código de trabajo:
<input type="date" id="start-date" name="start-date" value="2019-10-10"/> <label for="date">to</label> <input type="date" id="end-date" name="end-date" value="2020-05-10"/> <script> document.onreadystatechange = function () { var start_date = document.getElementById("start-date").value; var end_date = document.getElementById("end-date").value; $.ajax({ url: "/dates", type: "GET", data: { start_date: start_date, end_date: end_date, }, }); }; </script>document.onreadystatechange no tiene ningún sentido.
Necesitas un evento de cambio
Aquí delego de document.
window.addEventListener("DOMContentLoaded", function() { // only needed if the script is not after the date elements document.addEventListener("change",function(e) { // this can be narrowed to a closer container like a form const tgt = e.target; if (!tgt.matches("[type=date]") return; // not a date change let start_date = document.getElementById("start-date").value; let end_date = document.getElementById("end-date").value; $.get("/dates", {start_date, end_date },function(data) { console.log(data); // returned from server }); }); });Alternativa usando el mismo controlador de eventos para ambas fechas
window.addEventListener("DOMContentLoaded", function() { // only needed if the script is not after the date elements const startDateField = document.getElementById("start-date"); const endDateField = document.getElementById("end-date"); const dateChange = e => { let start_date = startDateField.value; let end_date = endDateField.value; $.get("/dates", {start_date, end_date },function(data) { console.log(data); // returned from server }); }; startDateField.addEventListener("change",dateChange); endDateField.addEventListener("change",dateChange); });