[英]Javascript Validate Text Boxes with Error IF all three text boxes <> then 100%
我有一個包含4個文本框的表單,我需要驗證方面的幫助。
我需要總的合並值為= 100%,如果小於或大於則顯示錯誤。
例如
框1用戶輸入50%,框2用戶輸入30%,框3用戶輸入19%。 方框4將保留方框1,2和3的總值,即總計99%。當用戶單擊“提交”時,它應該驗證並返回錯誤,例如,總計不等於100%。如果方框4的總和大於100%
目前,我有計算框4的總價值,但不確定如何進行驗證!
<SCRIPT language="JavaScript">
function CalculateCardT()
{
formSectionA.CardTotal.value =
parseFloat(formSectionA.strPercDeferredGoods.value) + parseFloat(formSectionA.strPercDeposits.value) + parseFloat(formSectionA.strPercSubscriptions.value);
}
</SCRIPT>
<tr>
<td rowspan="2" nowrap="nowrap"> % of CARD turnover</td>
<td nowrap="nowrap">% Deferred delivery of goods</td>
<td nowrap="nowrap">% Deposit is taken</td>
<td nowrap="nowrap">% Subscriptions</td>
<td nowrap="nowrap">% Total</td>
</tr>
<tr>
<td nowrap="nowrap">
<input name="strPercDeferredGoods" type="text" required="required" id="strPercDeferredGoods" tabindex="6" onBlur="CalculateCardT();" onChange="CalculateCardT();" size="3" maxlength="3" /></td>
<td nowrap="nowrap">
<input name="strPercDeposits" type="text" required="required" id="strPercDeposits" " tabindex="7" onBlur="CalculateCardT();" onChange="CalculateCardT();" size="3" maxlength="3" />
</td>
<td nowrap="nowrap">
<input name="strPercSubscriptions" type="text" required="required" id="strPercSubscriptions" tabindex="8" onblur="CalculateCardT();" onChange="CalculateCardT();" size="3" maxlength="3"/></td>
<td nowrap="nowrap">
<input name="CardTotal" type="text" id="CardTotal" style="background-color:#CCC" size="3" maxlength="3" onKeyDown="return false;"/></td>
</tr>
BTW。 我是菜鳥,正在使用Dreamweaver,因此請輕松編寫代碼!
首先-您使用的代碼已過時,並且存在語法錯誤。
這是語法正確的HTML的較短版本
<table>
<thead>
<tr>
<th>% Deferred delivery of goods</th>
<th>% Deposit is taken</th>
<th>% Subscriptions</th>
<th>% Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="strPercDeferredGoods" />
</td>
<td>
<input type="text" id="strPercDeposits" />
</td>
<td>
<input type="text" id="strPercSubscriptions" />
</td>
<td>
<input type="text" id="CardTotal" disabled="disabled" />
</td>
</tr>
</tbody>
</table>
還有JavaScript,我在每一行都評論了它的功能,因此您可以從中學習:
// IIFE - create local "document"
(function (document) {
// Store all of the "input" elements in the variable "elems"
var elems = document.getElementsByTagName("input");
// Store an array of id's of the items to sum in the variable "idsToSum"
var idsToSum = ["strPercDeferredGoods", "strPercDeposits", "strPercSubscriptions"]
// Loop through the "input" elements
for (var i = 0; i < elems.length; i++) {
// For each "input" element, add a "change" event listener
// When the event happens, run the function
elems[i].addEventListener("change", function () {
// Define a variable "sum" and assign a value of 0 to it
var sum = 0;
// Loop through all of the "idsToSum"
for (var a = 0; a < idsToSum.length; a++) {
// If the value of the current input is a number (removing the % sign if applicable), then add the value to the "sum" variable. Otherwise, add 0
sum += isNaN(parseFloat(document.getElementById(idsToSum[a]).value.replace("%", ""))) ? 0 : parseFloat(document.getElementById(idsToSum[a]).value.replace("%", ""));
}
// If the value of "sum" is greater than 100
if (sum > 100) {
// Clear the "CardTotal" value
document.getElementById("CardTotal").value = "";
// Alert an error
alert("Total is not equal to 100%");
}
// Otherwise
else {
// Assign the value of "CardTotal" to the value of "sum" and add a % sign
document.getElementById("CardTotal").value = sum + "%";
}
});
}
// IIFE - pass in global "document"
})(document);
注意:您的JavaScript應該放置在HTML結束符</body>
這是一個工作示例:
(function (document) { var elems = document.getElementsByTagName("input"); var idsToSum = ["strPercDeferredGoods", "strPercDeposits", "strPercSubscriptions"] for (var i = 0; i < elems.length; i++) { elems[i].addEventListener("change", function () { var sum = 0; for (var a = 0; a < idsToSum.length; a++) { sum += isNaN(parseFloat(document.getElementById(idsToSum[a]).value.replace("%", ""))) ? 0 : parseFloat(document.getElementById(idsToSum[a]).value.replace("%", "")); } if (sum > 100) { document.getElementById("CardTotal").value = ""; alert("Total is not equal to 100%"); } else { document.getElementById("CardTotal").value = sum + "%"; } }); } })(document);
input{width:96%;} table,th,td{border:1px solid black; border-collapse:collapse;}
<table> <thead> <tr> <th>% Deferred delivery of goods</th> <th>% Deposit is taken</th> <th>% Subscriptions</th> <th>% Total</th> </tr> </thead> <tbody> <tr> <td> <input type="text" id="strPercDeferredGoods" /> </td> <td> <input type="text" id="strPercDeposits" /> </td> <td> <input type="text" id="strPercSubscriptions" /> </td> <td> <input type="text" id="CardTotal" disabled="disabled" /> </td> </tr> </tbody> </table>
另外-您確實沒有理由使用Dreamweaver。 花時間學習代碼。 它確實非常簡單,並且有大量的免費資源和HTML和JavaScript教程。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.