Techniques for retrieving user inputs upon loading the HTML document and detecting changes using JavaScript

Question

Techniques for retrieving user inputs upon loading the HTML document and detecting changes using JavaScript

I am new to using JS to pass data to Python. I have managed to collect the values when the HTML is loaded, but I am facing an issue where the value does not change when it is updated.

Here is the code snippet that I have been working with:

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

javascript ajax dom-events javascript-objects

Answer 1

Answer №1

document.onreadystatechange doesn't really have a purpose.

You should be using a change event instead

In this approach, I am delegating from the document.

window.addEventListener("DOMContentLoaded", function() { // only necessary if the script is not placed after the date elements
  document.addEventListener("change",function(e) { // this can be more specific to a closer container like a form
    const tgt = e.target;
    if (!tgt.matches("[type=date]")) return; // if it's 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); // data returned from server
    });
  });
});

An alternative method using the same event handler for both dates

window.addEventListener("DOMContentLoaded", function() { // only needed if the script is not placed 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); // data returned from server
    });
  };
  startDateField.addEventListener("change",dateChange);
  endDateField.addEventListener("change",dateChange);
});

Answer 2

document.onreadystatechange doesn't really have a purpose.

You should be using a change event instead

In this approach, I am delegating from the document.

window.addEventListener("DOMContentLoaded", function() { // only necessary if the script is not placed after the date elements
  document.addEventListener("change",function(e) { // this can be more specific to a closer container like a form
    const tgt = e.target;
    if (!tgt.matches("[type=date]")) return; // if it's 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); // data returned from server
    });
  });
});

An alternative method using the same event handler for both dates

window.addEventListener("DOMContentLoaded", function() { // only needed if the script is not placed 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); // data returned from server
    });
  };
  startDateField.addEventListener("change",dateChange);
  endDateField.addEventListener("change",dateChange);
});

Techniques for retrieving user inputs upon loading the HTML document and detecting changes using JavaScript

Answer №1

Similar questions

What are the steps for importing KnockOut 4 in TypeScript?

Issue with VueJs and ChartJs not displaying custom options when making an API call

Share the hyperlink to a webpage with someone else

Leveraging trustAsHTML with an array of object elements

What is the method to retrieve the index or row number using the map function in Google Sheets?

Attempting to incorporate Font-Awesome Icons into the navigation bar tabs

Troubleshooting the issue of React forms hook not functioning properly with Material UI Select input

Testing the scope of an Angular directive

JavaScript MP3 player

How can you prevent the 'Script not responding' error when using Reverse AJAX / Comet?

obtain an inner element within a container using the class name in a div

Using JSON in an AJAX request to log in

"Troubleshooting: Resolving 404 Errors with JavaScript and CSS Files in a Vue.js and Node.js Application Deploy

Send multipart form data to a different server via pipe

Unable to utilize navigator.camera.getPicture in iOS while using PhoneGap Adobe Build

"Unable to locate the specified file or directory" error message pops up while attempting to save a file

Encountering the error "object object" while attempting to pass parameters to my servlet through AJAX

Is it necessary to incorporate Babel into a project that involves developing a backend service using Node.js and a front-end component using the EJS view engine?

Ensure that the assistant stays beneath the cursor while moving it

Striving to design an event planner with the datepicker feature in javascript