Jquery - how to trigger the event if any change happens on the input field

Dunn
July 20, 2023
220 views
0 votes
2 Answers

I have written a code which works on change but now I am also looking into page load and anything happens on the input field which has that specific class like blur or oninput ot paste or whatever, it should trigger the code and the moment the value is more than 0.00, it should run the code and display the label to block

Here is my code

  document.addEventListener('readystatechange', function(e) {
    switch (e.target.readyState) {
      case "complete":
        $('.totalsTeal').trigger('change');
        break;
      }
    });

and here is how the change event is written

  $(document).on('change focus blur', '.totalsTeal', function() {
    let self = $(this);
    let day = self.attr('data-name');
    if (self.val() === "0.00") {
      $('#w1_' + day).parent().find('label').css('display', 'none');
    } else {
      $('#w1_' + day).parent().find('label').css('display', 'block');
    }
});

the above code shows what I have done and what I am trying to write

Tags: javascript jquery

Answers

Use the input event, which triggers when an input field receives any input.

This is really a trivial operation that really isn’t made that much simpler with JQuery. Also, you should be using CSS classes instead of working with inline styles as inline styles are more difficult to override and can lead to duplication of code.

Place the following code within a <script> element and place that element just prior to the closing body tag and you’re done.

// Get a reference to the element where the message will be
// FYI: A label is not meant for this.
const output = document.querySelector(".hidden");

// Set up an input event handler on the input field
// The event will trigger as any kind of input happens to the field
document.querySelector(".foo").addEventListener("input", function(e) {
  // All values that come from HTML are strings.
  // Prepending that string with + implicitly converts it to a number
  if(+this.value > 0){
     // Remove the hidden CSS class to reveal element
     output.classList.remove("hidden");
  } else {
     // Apply the hidden CSS class to hide the element
     output.classList.add("hidden");
  }
});

/* When possible, use CSS classes instead of  inline styles. */
.hidden { display:none; }

<input class="foo" type="number">
<div class="hidden">Message Here</div>

Please be consistent – use DOM OR jQuery, please do not mix.

jQuery

$(function() {
  $('.totalsTeal').on('input', function() {
    console.log(this.value, this.value === '0.00')
    const day = $(this).data('name');
    $('#w1_' + day).parent().find('label')
      .toggle(+$(this).val() !== 0)
  }).trigger('input');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="parentDiv">
  <input class="totalsTeal" type="number" value="1.00" data-name="x">
  <span id="w1_x">Not sure what wl is</span>
  <label hidden>Message Here</label>
</div>
<div class="parentDiv">
  <input class="totalsTeal" type="number" value="0.00" data-name="y">
  <span id="w1_y">Not sure what wl is</span>
  <label  hidden>Message Here</label>
</div>
<div class="parentDiv">
  <input class="totalsTeal" type="number" value="1.00" data-name="z">
  <span id="w1_z">Not sure what wl is</span>
  <label  hidden>Message Here</label>
</div>

Vanilla JS

window.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('container')
  container.addEventListener('input', (e) => {
    const tgt = e.target;
    if (!tgt.matches('.totalsTeal')) return;
    const day = tgt.dataset.name;
    console.log(day,`w1_${day}`)
    document.getElementById(`w1_${day}`).closest('div').querySelector('label').hidden = +tgt.value !== 0;
  });
  container.querySelectorAll('.totalsTeal').forEach(inp => {
    console.log(inp.value)
    inp.dispatchEvent(new Event('input', {
      bubbles: true,
      cancelable: true
    }));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div id="container">
  <div class="parentDiv">
    <input class="totalsTeal" type="number" value="0.00" data-name="x">
    <span id="w1_x">Not sure what wl is</span>
    <label hidden>Message Here</label>
  </div>
  <div class="parentDiv">
    <input class="totalsTeal" type="number" value="1.00" data-name="y">
    <span id="w1_y">Not sure what w1 is</span>
    <label hidden>Message Here</label>
  </div>
  <div class="parentDiv">
    <input class="totalsTeal" type="number" value="2.00" data-name="z">
    <span id="w1_z">Not sure what w1 is</span>
    <label hidden>Message Here</label>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – how to trigger the event if any change happens on the input field

Answers