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

Create a unique functionality by assigning multiple event handlers to a single event

Using sl-vue-tree with vue-cli3.1 on internet explorer 11

Setting maximum and minimum zoom limits for an element ID using JavaScript or jQuery

The issue of flickering during the combination of slideToggle and animate in jQuery

Code in Javascript that performs a check for pre-order traversal

Minimization tools for compressing CSS and JavaScript documents

Differences between ClosureFeedbackCellArray and FeedbackVector in the V8 engine

Issues with jQuery .submit() function not functioning properly following an ajax request

Analyzing various PHP $_POST keywords for validation

retrieving data from a different controller in AngularJS

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

A Vue computed property is returning the entire function instead of the expected value

Why is the child's CSS hover not functioning when the body has an event listener attached to it?

Obtain information using AJAX calls with jQuery Flot

"Retrieve the values of the items that have been chosen from a list using jQuery

Update the board with a feature for uploading files

What should we name this particular style of navigation tab menu?

ES6 Generators: lack of informative stack trace when using iterator.throw(err)

A different approach to joining strings

Unusual actions observed in ajax rails form calculator with pre-filled values