CODEWITHSUNDEEP
javascripthtmlfor-loopif-statementinput
logan26
logan26

Reputation: 283

How to add if input is empty within this code?

I'm a bit stuck on how to add in this code if the inputs are empty, to shoot an alert. Would I add another function within the first? Any hints would be appreciated! 

function getCandidateNames() {
    var inputs = document.getElementsByTagName("input");
    var result = [];
    for (var i = 0; i < inputs.length; i += 1) {
        if (inputs[i].getElementsByTagName("candidate")) {
            result.push(inputs[i].value);
        }
    }
    return result;
}

function putCandidateNames(names) {
    document.getElementById("candidateName1").innerHTML = names[0];
    document.getElementById("candidateName2").innerHTML = names[1];
    document.getElementById("candidateName3").innerHTML = names[2];
}

function candidateNames() {
    putCandidateNames(getCandidateNames());
}

The HTML

<fieldset id="candidates">
    <legend>Candidates</legend>
    <div>
        <label for="cand1">Candidate 1</label>
        <input class="candidate" id="cand1" placeholder="Candidate">
    </div>
    <div>
        <label for="cand2">Candidate 2</label>
        <input class="candidate" id="candName" placeholder="Candidate">
    </div>
    <div>
        <label for="cand3">Candidate 3</label>
        <input class="candidate" id="candName" placeholder="Candidate">
    </div>
</fieldset>

Upvotes: 1

Views: 65

Answers (1)

cнŝdk
cнŝdk

Reputation: 32145

You have many problems in your code that needs to be fixed:

  • You can't use the same id id="candName" for multiple elements in the page.
  • This code inputs[i].getElementsByTagName("candidate") is completely wrong here you should use getElementsByClassName("candidate") instead, because you don't have candidate tags you used them as classes.
  • And instead of getting the inputs nodeList then iterate over it with inputs[i].getElementsByTagName("candidate") you can just use document.getElementsByClassName("candidate").

This is how should be your code:

function getCandidateNames() {
  var inputs = document.getElementsByClassName("candidate");
  var result = [];
  if (Array.prototype.some.call(inputs, function(input) {
      return input.value === "";
    })) {
    alert("Inputs should not be empty!!!");
    return false;
  }
  Array.prototype.forEach.call(inputs, function(input) {
    result.push(input.value);
  });
  return result;
}

Demo:

function getCandidateNames() {
  var inputs = document.getElementsByClassName("candidate");
  var result = [];
  if (Array.prototype.some.call(inputs, function(input) {
      return input.value === "";
    })) {
    alert("Inputs should not be empty!!!");
    return false;
  }
  Array.prototype.forEach.call(inputs, function(input) {
    result.push(input.value);
  });
  console.log(result);
  return result;
}
<fieldset id="candidates">
  <legend>Candidates</legend>
  <div>
    <label for="cand1">Candidate 1</label>
    <input class="candidate" id="cand1" placeholder="Candidate">
  </div>
  <div>
    <label for="cand2">Candidate 2</label>
    <input class="candidate" id="candName" placeholder="Candidate">
  </div>
  <div>
    <label for="cand3">Candidate 3</label>
    <input class="candidate" id="candName2" placeholder="Candidate">
  </div>
</fieldset>
<button onclick="getCandidateNames()">Validate</button>

Note:

Note the use of Array.prototype.forEach.call and Array.prototype.some.call, which are used to loop over the nodeList borrowing JavaScript Array built-in functions.

Alternative:

This is an alternative using simple syntax:

function getCandidateNames() {
  var inputs = document.getElementsByClassName("candidate");
  var result = [];
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].value !== "") {
      result.push(inputs[i].value);
    } else {
      alert("Inputs can't be empty !!!");
      return false;
    }
  }
  return result;
}

Demo:

function getCandidateNames() {
  var inputs = document.getElementsByClassName("candidate");
  var result = [];

  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].value !== "") {
      result.push(inputs[i].value);
    } else {
      alert("Inputs can't be empty !!!");
      return false;
    }
  }
  console.log(result);
  return result;
}
<fieldset id="candidates">
  <legend>Candidates</legend>
  <div>
    <label for="cand1">Candidate 1</label>
    <input class="candidate" id="cand1" placeholder="Candidate">
  </div>
  <div>
    <label for="cand2">Candidate 2</label>
    <input class="candidate" id="candName" placeholder="Candidate">
  </div>
  <div>
    <label for="cand3">Candidate 3</label>
    <input class="candidate" id="candName2" placeholder="Candidate">
  </div>
</fieldset>
<button onclick="getCandidateNames()">Validate</button>

Upvotes: 2

Related Questions