Как рассчитать общую стоимость с полями ввода, используя jQuery?

Question

Я искал в Интернете решение моей проблемы, но пока не повезло. Я надеюсь, что кто-то сможет преодолеть это препятствие, которое я преодолел, или направить меня в правильном направлении.

Я создаю онлайн регистрационную форму для игроков. До сих пор, когда я выбираю дату рождения с помощью средства выбора даты jquery, он возвращает правильный возраст пользователя на основе определенной даты, которую я установил. Я использую оператор switch для отображения правильного названия подразделения и цены на веб-странице в зависимости от выбранного возраста.

До этого момента все работало правильно.

Моя проблема сейчас в том, что я не могу нацелить значение каждой цены, чтобы создать функцию, которая складывает каждую цену для общего итога.

HTML часть взята из моего php файла:

<div>
    <div>
        <label for="player-birthdate-1">Birthdate</label>
        <input type="text" class="default-input" id="datepicker1" value="">
    </div>

    <div>
        <label for="player-division-1">Division</label> 
        <input type="text" id="playerDivision1" value="" disabled> 
    </div>

    <div>
        <p id="playerFee1" class="fee" value=""></p>
    </div>
</div>


<div>
    <div>
        <label for="player-birthdate-2">Birthdate</label>
        <input type="text" class="default-input" id="datepicker2" value="">
    </div>

    <div>
        <label for="player-division-2">Division</label> 
        <input type="text" id="playerDivision2" value="" disabled> 
    </div>

    <div>
        <p id="playerFee2" class="fee" value=""></p>
    </div>
</div>

<div>
    <p id="total" value=""></p>
</div>

Часть, взятая из моего php-файла, где я беру название подразделения и цену из базы данных:

<script>
    var divisions = {
        <?php
    $sql = $db->prepare("SELECT * FROM division");
    $sql->execute();
    $results = $sql->fetchAll(PDO::FETCH_OBJ);

    foreach ($results as $division) :
        ?>

            '<?php echo $division->division_id; ?>' : {
           id : '<?php echo $division->division_id;?>'
          ,name : '<?php echo $division->division_name;?>'
          ,price : '<?php echo $division->division_price;?>' 
            },

        <?php endforeach; ?>
    }
</script>

Код Datepicker и Total Fee взят из моего файла js:

$(document).ready(function() {

    $( '#datepicker1' ).datepicker({
onSelect: function(value, ui) {
    var newDate = new Date("April 30, " + (new Date()).getFullYear()),
        dob = $("#datepicker1").datepicker("getDate"),
        age = new Date(newDate - dob).getFullYear() - 1970;
        $('#age').val(age);
        console.log(age);

        switch (age){

            case 5:
            case 6: 
                $("#playerDivision1").val(divisions['1'].name);
                $("#playerFee1").html(divisions['1'].price);
            break;

            case 7:
            case 8: 
                $("#playerDivision1").val(divisions['2'].name);
                $("#playerFee1").html(divisions['2'].price);
            break;

                            //continues on for the remaining of the ages.....

                },                      
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy-mm-dd', 
                yearRange: '1990:2012'


        });


    $( '#datepicker2' ).datepicker({
onSelect: function(value, ui) {
    var newDate = new Date("April 30, " + (new Date()).getFullYear()),
        dob = $("#datepicker1").datepicker("getDate"),
        age = new Date(newDate - dob).getFullYear() - 1970;
        $('#age').val(age);
        console.log(age);

        switch (age){

            case 5:
            case 6: 
                $("#playerDivision2").val(divisions['1'].name);
                $("#playerFee2").html(divisions['1'].price);
            break;

            case 7:
            case 8: 
                $("#playerDivision2").val(divisions['2'].name);
                $("#playerFee2").html(divisions['2'].price);
            break;

                            //continues on for the remaining of the ages.....

                },                      
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy-mm-dd', 
                yearRange: '1990:2012'


        });


    $('.fee').html(function(){

        var total = 0;

        $('.fee').each(function(){

            var fee = parseFloat($(this).val());
                        if (isNaN(fee)) {fee = 0;}
                        total+= fee;

            $('#total').html('$' + total);

        });
    });

});

С нетерпением жду совета от тех, кто на форуме. Любая помощь или толчок в правильном направлении очень ценится! :)

Answer 1

Вы хорошо поработали и упростили задачу, предоставив каждому класс «платы» уже, но я предполагаю, что вы хотите parseFloat, а не parseInt (в случае, если в гонораре есть центы?).1001 *

Кроме того, вам нужно проверить, если это isNaN (не число), иначе он не будет работать должным образом.Это просто добавить:

if (isNaN(fee)) {fee = 0;}

Наконец, кажется, что вы делаете это на событии "change".Мне повезло больше с событием keyup.

Answer 2

Если вы выполняете вычисления внутри функционального цикла jQuery each(), то вы можете использовать jQuery $(this).val(), чтобы получить значение внутри каждого поля.Затем вы можете создать совокупную сумму.

Answer 3

Я думаю, что происходит строка (и это код):

$('.fee').html(function(){

на самом деле никогда не вызывается или не вызывается в нужное время.

Мое предложение заключалось бы в том, чтобы обернуть содержимое элемента .fee в функцию. Затем вызовите эту функцию в обратном вызове выбора средства выбора даты. (Вероятно, прямо перед каждым оператором break;.) Таким образом, итоговая сумма будет пересчитываться при каждом изменении даты.

Ваша функция будет выглядеть примерно так:

function calcFee () {
  var total = 0;

  $('.fee').each(function () {
    ...
  });
}