當輸入為空字串時，表單不會從第一個輸入框中洗掉警報

我正在為學校做作業來展示我們對 javascript 的了解。它正在做我想做的一切，除了當我將第一個輸入從空字串調整為一個值時，它仍然需要顯示名字。我還想知道是否有人知道如何在我點擊的其他按鈕被點擊時顯示所需的輸入，因為我不希望其他功能運行，除非所有輸入都填寫在表單中。謝謝！

//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>

uj5u.com熱心網友回復：

//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>

你在你的函式中得到了錯誤的元素，在第一個條件下驗證，在其他條件下你得到 t2result 而不是 t1，希望現在可以作業。

標籤：javascript html 形式

上一篇：TypeErrorat/Field'id'需要一個數字但得到<username>

下一篇：生成表單的反應組件中的遞回