如果所有三个文本框<>然后是100%

Javascript Validate Text Boxes with Error IF all three text boxes <> then 100%

本文关键字：gt lt 然后 100% 文本 三个 如果      更新时间：2023-09-26

我有一个包含4个文本框的Form，我需要验证方面的帮助。

我需要总的组合值=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>

顺便说一句。我是一个傻瓜，正在使用Dreamweaver，所以请在代码上放松！

First-您使用的代码已经过时，并且存在语法错误。

以下是语法正确的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。

相关文章：