При отправке формы динамическое плавание в форме изменяется на NaN

Question

У меня есть форма, в которой пользователь может выбрать услуги, которые он хочет, с различными затратами. Когда они выбирают услугу, я складываю общую сумму, подлежащую выплате внизу, используя 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

Я исправил это.

оказывается, у меня был тот же класс (btn-primary) на кнопке отправки, который выбрасывал все это. Как только я изменил класс на фактических кнопках выбора, чтобы он не конфликтовал с отправкой, он работал.