提交表单时，表单中的动态浮动变为 NaN答案

【问题标题】：Dynamic float in form changes to NaN when form submitted提交表单时，表单中的动态浮动变为 NaN
【发布时间】：2015-04-10 13:42:56
【问题描述】：

我有一个表单，用户可以在其中选择他们想要的服务，但涉及不同的费用。当他们选择一项服务时，我将使用 jQuery 在底部添加总应付金额，这一切都很好，它只是向用户显示他们需要支付多少费用。

然而，在他们点击提交按钮和支付网关加载之间的第二秒，屏幕上的动态值变为 NaN。

只是看起来不太专业。

这是代码的 sn-p。

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 的总变化。

有什么想法吗？

【问题讨论】：

对此略有更新。似乎提交按钮在发布数据之前将动态浮动值更改回零。

标签： jquery nan dynamic-values

【解决方案1】：

我解决了这个问题。

原来我在提交按钮上有相同的类（btn-primary），它把它全部扔掉了。一旦我更改了实际选择按钮上的类，使其不会与提交冲突，它就起作用了。

【讨论】：