Question

我正在表单中自动计算TAX / TDR。

但是，它没有用。我在这里做错了什么？

表单标签包含：

金额：用户输入

卡片类型：选择选项

签证（加20％的金额）美国运通卡（增加17.5％金额）其他（增加15％的金额）

总计：金额+所选卡类型％金额

<html>
<head>

<script>

var calcObject = {
    amountNull : '0.00',
    amountTax : '0.00',
    amountTotal : '0.00',
};

run : function() {
    var amount = $('#amount').val();
    var tax  = $('#tax').val();
    var included = $('#tax_included').is(':checked');
    if (amount !== '' && tax !== '') {
        if (included) {
            var amountNew = amount / ((tax / 100) + 1);
            calcObject.amountTax = parseFloat(amount) - parseFloat(amountNew);
            calcObject.amountTotal = amountNew.toFixed(2);
        } else {
            calcObject.amountTax = (amount * tax) / 100;
            calcObject.amountTotal = parseFloat(amount) + parseFloat(calcObject.amountTax);
        }
        $('#tax_amount').val(parseFloat(calcObject.amountTax).toFixed(2));
        $('#total_amount').val(parseFloat(calcObject.amountTotal).toFixed(2));
    } else {
        $('#tax_amount').val(calcObject.amountNull);
        $('#total_amount').val(calcObject.amountNull);
    }
}


$(function() {

    $('#amount').keyup(function() {
        calcObject.run();
    });

    $('#tax_included').click(function() {
        calcObject.run();
    });

    $('#tax').change(function() {
        calcObject.run();
    });

});

</script>
</head>
<body>
<form id="calculator" method="post">

    <table class="tbl_insert">
        <tr>
            <th><label for="amount">Amount:</label></th>
            <td>
                <input type="text" name="amount" id="amount" value="" class="field" />
            </td>
        </tr>
        <tr>
            <th><label for="tax_included">TDR included?:</label></th>
            <td>
                <input type="checkbox" name="tax_included" id="tax_included" />
            </td>
        </tr>
        <tr>
            <th><label for="tax">Card Type :</label></th>
            <td>
                <select name="tax" id="tax" class="select">
                    <option value="20">VISA</option>
                    <option value="17.5">Amex card</option>
                    <option value="15">other</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><label for="tax_amount">VAT/Tax:</label></th>
            <td>
                <input type="text" name="tax_amount" id="tax_amount" 
                    value="0.00" class="field" disabled="disabled" />
            </td>
        </tr>
        <tr>
            <th><label for="total_amount">Total:</label></th>
            <td>
                <input type="text" name="total_amount" id="total_amount" 
                    value="0.00" class="field" disabled="disabled" />
            </td>
        </tr>
    </table>

</form>
</body>
</html>

Answer 1

你有几个错误。

对象calcObject定义的语法错误
不包括Jquery

我修复了它们，这将有效......

JSFIDDLE DEMO

<html>
<head>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<script>
var calcObject = {
    amountNull : '0.00',
    amountTax : '0.00',
    amountTotal : '0.00',
 run : function() {
    var amount = $('#amount').val();
    var tax  = $('#tax').val();
    var included = $('#tax_included').is(':checked');
    if (amount !== '' && tax !== '') {
        if (included) {
            var amountNew = amount / ((tax / 100) + 1);
            calcObject.amountTax = parseFloat(amount) - parseFloat(amountNew);
            calcObject.amountTotal = amountNew.toFixed(2);
        } else {
            calcObject.amountTax = (amount * tax) / 100;
            calcObject.amountTotal = parseFloat(amount) + parseFloat(calcObject.amountTax);
        }
        $('#tax_amount').val(parseFloat(calcObject.amountTax).toFixed(2));
        $('#total_amount').val(parseFloat(calcObject.amountTotal).toFixed(2));
    } else {
        $('#tax_amount').val(calcObject.amountNull);
        $('#total_amount').val(calcObject.amountNull);
    }
  }
};


$(function() {

    $('#amount').keyup(function() {
        calcObject.run();
    });

    $('#tax_included').click(function() {
        calcObject.run();
    });

    $('#tax').change(function() {
        calcObject.run();
    });

});
</script>

</head>
<body>
<form id="calculator" method="post">

    <table class="tbl_insert">
        <tr>
            <th><label for="amount">Amount:</label></th>
            <td>
                <input type="text" name="amount" id="amount" value="" class="field" />
            </td>
        </tr>
        <tr>
            <th><label for="tax_included">TDR included?:</label></th>
            <td>
                <input type="checkbox" name="tax_included" id="tax_included" />
            </td>
        </tr>
        <tr>
            <th><label for="tax">Card Type :</label></th>
            <td>
                <select name="tax" id="tax" class="select">
                    <option value="20">VISA</option>
                    <option value="17.5">Amex card</option>
                    <option value="15">other</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><label for="tax_amount">VAT/Tax:</label></th>
            <td>
                <input type="text" name="tax_amount" id="tax_amount" 
                    value="0.00" class="field" disabled="disabled" />
            </td>
        </tr>
        <tr>
            <th><label for="total_amount">Total:</label></th>
            <td>
                <input type="text" name="total_amount" id="total_amount" 
                    value="0.00" class="field" disabled="disabled" />
            </td>
        </tr>
    </table>

</form>
</body>
</html>

以Web表单自动计算税/ TDR

1 个答案: