Form doesn't remove alert from the first input box when the input being an empty string is chan-CodePudding

I am doing an assignemnt for school to showcase our knowledge of javascript. It is doing everything I want it to except when I adjust the first input from an empty string to a value it still has the display of first name required. I was also wondering if anyone had insight as to how to display the needed inputs when the other buttons I have clicked are cliked as I don't want the other functions to run unless all inputs are filled in the form. Thanks!

//Function to validate form inputs
function validate() {

  var fname = document.getElementById("t1").value;

  var lname = document.getElementById("t2").value;

  var phoneNumber = document.getElementById("t3").value;

  var prodOne = document.getElementById("t4").value;

  var prodTwo = document.getElementById("t5").value;

  var prodThree = document.getElementById("t6").value;

  var isValid = true;

  if (fname == "") {

    document.getElementById("t1result").innerHTML = " First Name is required";

    isValid = false;

  } else {
    document.getElementById("t2result").innerHTML = "";
  }

  if (lname == "") {

    document.getElementById("t2result").innerHTML = " Last Name is required";

    isValid = false;

  } else {
    document.getElementById("t3result").innerHTML = "";
  }

  if (phoneNumber == "") {

    document.getElementById("t3result").innerHTML = " Phone number is required";

    isValid = false;

  } else {
    document.getElementById("t3result").innerHTML = "";
  }
  if (prodOne == "") {

    document.getElementById("t4result").innerHTML = " Product 1 is required";

    isValid = false;

  } else {
    document.getElementById("t4result").innerHTML = "";
  }

  if (prodTwo == "") {

    document.getElementById("t5result").innerHTML = " Product 2 is required";

    isValid = false;

  } else {
    document.getElementById("t5result").innerHTML = "";
  }

  if (prodThree == "") {

    document.getElementById("t6result").innerHTML = " Product 3 is required";

    isValid = false;

  } else {
    document.getElementById("t6result").innerHTML = "";
  }

}

//Function to calculate cost of all 3 products prior to tax
function calculate() {

  var prodOne = document.getElementById("t4").value;

  var prodTwo = document.getElementById("t5").value;

  var prodThree = document.getElementById("t6").value;

  var totalCost = parseInt(prodOne)   parseInt(prodTwo)   parseInt(prodThree)

  document.getElementById('totalAmount').innerHTML = "The total cost of the three products before tax is: $"   totalCost;

}


//Function to calculate cost of all 3 products with tax
function taxIncluded() {
  var prodOne = document.getElementById("t4").value;

  var prodTwo = document.getElementById("t5").value;

  var prodThree = document.getElementById("t6").value;

  var totalCost = parseInt(prodOne)   parseInt(prodTwo)   parseInt(prodThree)

  var totalCostTaxed = parseFloat(totalCost) * 0.13   parseFloat(totalCost)

  document.getElementById('totalAmountTax').innerHTML = "The total cost of the three products with tax is: $"   totalCostTaxed;
}

<form id="f1" method="get" action="secondpage.html">

  First Name: <input type="text" id="t1"><span class="result" id="t1result"></span>

  <br><br> Last Name: <input type="text" id="t2"><span class="result" id="t2result"></span>

  <br><br>Phone Number: <input type="text" id="t3"><span class="result" id="t3result"></span>

  <br><br>Product 1 amount: <input type="text" id="t4"><span class="result" id="t4result"></span>

  <br><br>Product 2 amount: <input type="text" id="t5"><span class="result" id="t5result"></span>

  <br><br>Product 3 amount: <input type="text" id="t6"><span class="result" id="t6result"></span>

  <br><br><input type="button" id="btn1" value="Validate" onclick="validate()">
  <br><br><input type="button" id="btn1" value="Calculate" onclick="calculate()">
  <br><br><input type="button" id="btn1" value="Calculate with Tax" onclick="taxIncluded()">
  <div>
    <p id="totalAmount">Total Amount</p>
  </div>
  <div>
    <p id="totalAmountTax">Tax</p>
  </div>

</form>

CodePudding user response：

//Function to validate form inputs
function validate() {

  var fname = document.getElementById("t1").value;

  var lname = document.getElementById("t2").value;

  var phoneNumber = document.getElementById("t3").value;

  var prodOne = document.getElementById("t4").value;

  var prodTwo = document.getElementById("t5").value;

  var prodThree = document.getElementById("t6").value;

  var isValid = true;

  if (fname == "") {

    document.getElementById("t1result").innerHTML = " First Name is required";

    isValid = false;

  } else {
    document.getElementById("t1result").innerHTML = "";
  }

  if (lname == "") {

    document.getElementById("t2result").innerHTML = " Last Name is required";

    isValid = false;

  } else {
    document.getElementById("t3result").innerHTML = "";
  }

  if (phoneNumber == "") {

    document.getElementById("t3result").innerHTML = " Phone number is required";

    isValid = false;

  } else {
    document.getElementById("t3result").innerHTML = "";
  }
  if (prodOne == "") {

    document.getElementById("t4result").innerHTML = " Product 1 is required";

    isValid = false;

  } else {
    document.getElementById("t4result").innerHTML = "";
  }

  if (prodTwo == "") {

    document.getElementById("t5result").innerHTML = " Product 2 is required";

    isValid = false;

  } else {
    document.getElementById("t5result").innerHTML = "";
  }

  if (prodThree == "") {

    document.getElementById("t6result").innerHTML = " Product 3 is required";

    isValid = false;

  } else {
    document.getElementById("t6result").innerHTML = "";
  }

}

//Function to calculate cost of all 3 products prior to tax
function calculate() {

  var prodOne = document.getElementById("t4").value;

  var prodTwo = document.getElementById("t5").value;

  var prodThree = document.getElementById("t6").value;

  var totalCost = parseInt(prodOne)   parseInt(prodTwo)   parseInt(prodThree)

  document.getElementById('totalAmount').innerHTML = "The total cost of the three products before tax is: $"   totalCost;

}


//Function to calculate cost of all 3 products with tax
function taxIncluded() {
  var prodOne = document.getElementById("t4").value;

  var prodTwo = document.getElementById("t5").value;

  var prodThree = document.getElementById("t6").value;

  var totalCost = parseInt(prodOne)   parseInt(prodTwo)   parseInt(prodThree)

  var totalCostTaxed = parseFloat(totalCost) * 0.13   parseFloat(totalCost)

  document.getElementById('totalAmountTax').innerHTML = "The total cost of the three products with tax is: $"   totalCostTaxed;
}

<form id="f1" method="get" action="secondpage.html">

  First Name: <input type="text" id="t1"><span class="result" id="t1result"></span>

  <br><br> Last Name: <input type="text" id="t2"><span class="result" id="t2result"></span>

  <br><br>Phone Number: <input type="text" id="t3"><span class="result" id="t3result"></span>

  <br><br>Product 1 amount: <input type="text" id="t4"><span class="result" id="t4result"></span>

  <br><br>Product 2 amount: <input type="text" id="t5"><span class="result" id="t5result"></span>

  <br><br>Product 3 amount: <input type="text" id="t6"><span class="result" id="t6result"></span>

  <br><br><input type="button" id="btn1" value="Validate" onclick="validate()">
  <br><br><input type="button" id="btn1" value="Calculate" onclick="calculate()">
  <br><br><input type="button" id="btn1" value="Calculate with Tax" onclick="taxIncluded()">
  <div>
    <p id="totalAmount">Total Amount</p>
  </div>
  <div>
    <p id="totalAmountTax">Tax</p>
  </div>

</form>

you were getting wrong element in your function validate in first condition , in else condition you were getting t2result instead of t1, hope this will work now.