I'm fairly new to javascript and looking at checking some fields with dynamic ID's at the end of the ID to see if they've either had values entered in all of them or none of them at all. The user shouldn't be allowed to only enter values in some of them and leave others blank.

I've wrote the below, which works, but I feel there must be a better way of doing this?:

var x = document.querySelectorAll('[id^="entryField"]');

for (var i = 0; i < x.length; ++i) {
   if (x[i].value == "") {
      for (var i = 0; i < x.length; ++i) {
         if (x[i].value != "") {
            alert("Please enter a value");
         }
      }
   }
}

I'm fairly new to javascript and looking at checking some fields with dynamic ID's at the end of the ID to see if they've either had values entered in all of them or none of them at all. The user shouldn't be allowed to only enter values in some of them and leave others blank.

I've wrote the below, which works, but I feel there must be a better way of doing this?:

var x = document.querySelectorAll('[id^="entryField"]');

for (var i = 0; i < x.length; ++i) {
   if (x[i].value == "") {
      for (var i = 0; i < x.length; ++i) {
         if (x[i].value != "") {
            alert("Please enter a value");
         }
      }
   }
}

• javascript
• arrays
• nodelist

• you iterate twice over x and have the same index variable. – Nina Scholz Commented Feb 8, 2017 at 11:56
• inner loop will cause far more alerts than you want – charlietfl Commented Feb 8, 2017 at 11:58
• Please try to explain better the issue so we might help you. – user7393973 Commented Feb 8, 2017 at 12:01
• They should only be able to either fill out all of the fields or leave them all empty, but if they fill out some and leave the rest empty the code should give them one alert notifying them of this. Hopefully that makes sense – kageoni Commented Feb 8, 2017 at 12:52

3 Answers 3

One loop should work with a counter for empty (or filled) fields. If the counter is not zero and does not have the length of the object, then some fields have a value.

var x = document.querySelectorAll('[id^="entryField"]'),
    empty = 0;

for (var i = 0; i < x.length; ++i) {
    if (x[i].value == "") {
        ++empty;
    }
}
if (empty !== 0 && empty !== x.length) {
    alert("Please enter a value");
}

This will be a simpler version:

  var x = document.querySelectorAll('[id^="entryField"]');

  const inputs = Array.from(x);
  const allInput = inputs.every(input => {
    return (input.value != "");
  });
  const allEmpty = inputs.every(input => {
    return (input.value == "");
  });

  if (allInput || allEmpty) {
      alert('xxxxxx');
  }

ES5 implementation:

  var x = document.querySelectorAll('[id^="entryField"]');

  var inputs = Array.from(x);
  var allInput = inputs.every(function(input) {
    return (input.value != "");
  });

  var allEmpty = inputs.every(function(input) {
    return (input.value == "");
  });


  if (allInput || allEmpty) {
      alert('xxxxxx');
  }

EDIT: Support allInput or allEmpty. Overlooked at the beginning.

You can check with two every calls, below will be true if all elements are filled or none of the elements are filled - every other case will be false:

var x = document.querySelectorAll('[id^="entryField"]');

var allowed = function allOrNone(elements) {
  return Array.prototype.every.call(x, function(v) {
    return v.value && v.value != "";
  }) || Array.prototype.every.call(x, function(v) {
    return !v.value || v.value == "";
  });
}

console.log(allowed(x));

<input id="entryFieldFoo">
<input id="entryFieldBar">