提交表单时，表单中的动态浮点数更改为 NaN

Question

我有一个表格，用户可以在其中 select 他们想要的服务，涉及不同的费用。当他们 select 一项服务时，我在底部使用 jQuery 将应付总额相加，一切正常，并且它只是向用户显示他们必须支付多少。

然而，在他们点击提交按钮和支付网关加载的那一刻，屏幕上的动态值变为 NaN。

只是看起来不太专业。

这是代码片段。

HTML

<form method="POST" action="">
    <div id="one" class="section btn-primary">
        <table>
            <tr>
                <td>Price</td>
                <td><span class="service-price">5.99</span></td>
            </tr>
            <tr>
                <td>VAT</td>
                <td><span class="service-vat">1.20</span></td>
            </tr>
            <tr>
                <td>Total</td>
                <td><span class="service-total">7.19</span></td>
            </tr>
        </table>
    </div>
    <div id="two" class="section btn-primary">
        <table>
            <tr>
                <td>Price</td>
                <td><span class="service-price">5.99</span></td>
            </tr>
            <tr>
                <td>VAT</td>
                <td><span class="service-vat">1.20</span></td>
            </tr>
            <tr>
                <td>Total</td>
                <td><span class="service-total">7.19</span></td>
            </tr>
        </table>
    </div>
    <div class="">
        <div class=" action">
            <table id="total-price">
                <tr>
                    <td>Price</td>
                    <td id="ex-vat">0</td>
                </tr>
                <tr>
                    <td>VAT</td>
                    <td id="vat">0</td>
                </tr>
                <hr/>
                <tr>
                    <td>
                         <h3>Total</h3>
                    </td>
                    <td>
                         <h3 id="payment-total">0</h3>
                    </td>
                </tr>
            </table>
        </div>
        <div class="">
            <input type="submit" value="Make Payment">
        </div>
    </div>
</form>

jQuery

$(document).ready(function () {

    $('.btn-primary').click(function () {

        $(this).toggleClass('selected');

        var service_price = parseFloat($(this).find('span.service-price').text());
        var service_vat = parseFloat($(this).find('span.service-vat').text());
        var service_total = parseFloat($(this).find('span.service-total').text());

        var paymentService = parseFloat($('#ex-vat').text());
        var paymentVat = parseFloat($('#vat').text());
        var paymentTotal = parseFloat($('#payment-total').text());

        if ($(this).hasClass('selected')) {

            paymentService = (paymentService + service_price);
            paymentVat = (paymentVat + service_vat);
            paymentTotal = (paymentTotal + service_total);

        } else {
            paymentService = (paymentService - service_price);
            paymentVat = (paymentVat - service_vat);
            paymentTotal = (paymentTotal - service_total);
        }

        $('#ex-vat').text(parseFloat(paymentService).toFixed(2));
        $('#vat').text(parseFloat(paymentVat).toFixed(2));
        $('#payment-total').text(parseFloat(paymentTotal).toFixed(2));

    });

});

还有一个有效的 JS FIDDLE，因此您可以看到它的实际效果。如果单击灰色框，则可以正常工作。但是在实时站点上提交时，总的更改为 NaN。

有什么想法吗？

Answer 1

我解决了这个问题。

事实证明，我在提交按钮上有相同的 class（btn-primary），它把它全部扔掉了。一旦我更改了实际 select 按钮上的 class 以使其与提交不冲突，它就起作用了。

提交表单时，表单中的动态浮点数更改为 NaN

Dynamic float in form changes to NaN when form submitted

jquery

nan

dynamic-values