3

I have multiple inputs I want to discriminate according to whether the user enters a value in it or not.

<input type="text" class="foo"> <br/>
<input type="text" class="foo" value = "D"> <br/>
//and so on.. 

<button onclick="calculate()">Hightlight</button>

The code I wrote only works with attribute values, instead of detecting "manually" typed values before launching the function :

function calculate() {

  var allinputs = document.querySelectorAll('input[value][type="text"]:not([value=""])');
  var myLength = allinputs.length;

  for (var i = 0; i < myLength; ++i) {
    allinputs[i].style.backgroundColor = "lime";

  }
}

I only want to detect the inputs in which the user typed something when he submits it through the highlight button. Is there a way to do it in pure javascript ?

Here is my fiddle : https://jsfiddle.net/Lau1989/Lytwyn8s/

Thanks for your help

Lau
  • 179
  • 2
  • 4
  • 13

2 Answers2

3

It's not possible to select empty inputs using CSS selectors (see Matching an empty input box using CSS), but you can achieve what you want by testing the length of the value before applying the style:

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;
  var input;

  for (var i = 0; i < myLength; ++i) {
    input = allinputs[i];
    if (input.value) {
        input.style.backgroundColor = "lime";
    }
  }
}
Community
  • 1
  • 1
clinton3141
  • 4,751
  • 3
  • 33
  • 46
  • Thanks. Your solution works when I type something in inputs with blank attributes value like but it still doesn't work when I type something in inputs with no value attributes. I could set blank attribute values to all my inputs, but I'm sure there is a more elegant way to do it ? Thanks again for your help – Lau Oct 07 '16 at 08:37
  • 1
    @Lau answer updated - removed `[value]` from the querySelectoAll so that it will now select all text inputs. – clinton3141 Oct 07 '16 at 08:44
1

You need to check value like this

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;

  for (var i = 0; i < myLength; ++i) {
    if (allinputs[i].value == '') {
      allinputs[i].style.backgroundColor = "lime";
    }
  }
}
<input type="text" class="foo">
<br/>
<input type="text" class="foo" value="D">
<br/>
<input type="text" class="foo" value="G">

<button onclick="calculate()">Hightlight</button>

<br/>
<br/>
<div id="output"></div>

See also JsFiddle link

And if you want to remove lime background when user fills input and clicks again you can add else statement.

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;
  for (var i = 0; i < myLength; ++i) {
    if (allinputs[i].value == '') {
      allinputs[i].style.backgroundColor = "lime";
    }else {
     allinputs[i].style.backgroundColor = "white";
        //allinputs[i].removeAttribute("style") or that
    }
  }
}
<input type="text" class="foo">
<br/>
<input type="text" class="foo" value="D">
<br/>
<input type="text" class="foo" value="G">

<button onclick="calculate()">Hightlight</button>

<br/>
<br/>
<div id="output"></div>

UPDATE

You need that

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;
  for (var i = 0; i < myLength; ++i) {
    if (!allinputs[i].hasAttribute("value")) {
        if(allinputs[i].value !== '') {
       allinputs[i].style.backgroundColor = "lime";
      }else {
        allinputs[i].removeAttribute("style");
      }
    }
  }
}
<input type="text" class="foo">
<br/>
<input type="text" class="foo" value="D">
<br/>
<input type="text" class="foo" value="G">

<button onclick="calculate()">Hightlight</button>

<br/>
<br/>
<div id="output"></div>
Narek-T
  • 1,898
  • 10
  • 20
  • +1 for your help, although I'm not trying to select empty inputs, but only inputs with no value attributes in which the user typed something. – Lau Oct 07 '16 at 08:41