Home > Software engineering >  While form fields empty jquery or js
While form fields empty jquery or js

Time:12-31

I need to do a check on a page that will show a message when the first 3 form fields on a page are all empty. I can write the checks and show the message, but I am not certain what the correct way to handle the "while" part is in js/jquery. I could just put this in a loop that runs every 100ms but I am 100% sure that its absolutely wrong.

var empty = true;    
$('input[type="text"].slice(0,3)').each(function() {
   if ($(this).val() != "") {
      empty = false;
      return false;
   }
});

if (empty) {
  document.getElementById('interactive-warning').style.display = 'none';
};

What is the "correct" way to do this?


The working code:

$(document).ready(function(){
  $('.form-text').slice(0,3).on('input', function() {
    var empty = true;    
    $('.form-text').slice(0,3).each(function() {
      if ($(this).val() != "") {
        empty = false;
        return false;
      }
    });

    if (!empty) {
      document.getElementById('interactive-warning').style.display = 'none';
    } else {
      document.getElementById('interactive-warning').style.display = 'block';
    };
  }).trigger('input');
});

I needed to execute on ready because the code needed to be added before the form.

CodePudding user response:

You can listen to the input event, which will let you know when the user changes those values, eg:

move your existing code into function checkIfEmpty() { ... and add:

$('input[type="text"].slice(0,3)').on("input", checkIfEmpty);

(note there's no () after checkIfEmpty on the event)

If your inputs are changed via code, the UI events aren't raised, so you'll need an alternative. The easiest way is: when your code changes the inputs, also call checkIfEmpty().

  • Related