JS - рассчитать цену в зависимости от полей span / div - PullRequest
Новая
       15

JS - рассчитать цену в зависимости от полей span / div

0 голосов
/ 31 марта 2019

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

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

Вот часть моей формы: 

<form name='formname_form' action='./index.php' method='post' class='formname-form' id='formname-form'>
<div class="row" id='save_prices'>
    <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-sm-12">
        <div class="form-inline">
            <label class="form-icon">
                <figure>
                    <img src="../assets/images/symbol-1.png" alt="/">
                </figure>
            </label>
            <div class="form-group">
                <select name="field_a" id="field_a" onchange="CalcDiscount()">
                    <option value="0,00">Option A?</option>
                    <option value="6,17">Yes</option>
                    <option value="0,00">No</option>
                </select>
            </div>
            <div class="amount-wrap-3">
                <span>&euro; <span id='field_a_price' class='prices'></span></span>
            </div>
        </div>
        <div class="form-inline">
            <label class="form-icon">
                <figure>
                    <img src="../assets/images/symbol-2.png" alt="/">
                </figure>
            </label>
            <div class="form-group">
                <select name="field_b" id="field_b" onchange="CalcDiscount()">
                    <option value="0,00">Option B</option>
                    <option value="17,50">Yes</option>
                    <option value="0,00">No</option>
                </select>
            </div>
            <div class="amount-wrap-3">
                <span>&euro; <span id='field_b_price' class='prices'></span></span>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-sm-12">
        <div class="total-amount">
            Total Price
            <div class='price'><span id='total_price' class="total_price"></span> &euro;</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-6 col-xs-12">
        <div class="form-inline">
            <input name='submit' type='submit' id='submit' value='Save' class='btn btn-form-indiv'/>
        </div>
    </div>
</div>
</form>

А вот моя часть JavaScript: 

<script>
    // Get references to the objects you need (<select> and <span>)
    var field_a = document.getElementById('field_a');
    var field_a_price = document.getElementById('field_a_price');

    var field_b = document.getElementById('field_b');
    var field_b_price = document.getElementById('field_b_price');

    // When the list value changes, set the innerHTML of the <span>
    field_a.onchange = function() {
        field_a_price.innerHTML = this.value;
    };

    field_b.onchange = function() {
        field_b_price.innerHTML = this.value;
    };

    var priceList = $('#save_prices').find('.prices');
    var totalPrice = 0;

    $.each(priceList, function(i, price){
        totalPrice += parseInt($(price).text())
    });

    $('.total_price').text(totalPrice);

</script>

Кто-нибудь имеет представление о том, что я делаю не так? Значение внутри моего диапазона с классом total_price всегда остается 0. Я предполагаю, что это как-то связано с моими методами onChange, которые я использую?

1 Ответ

1 голос
/ 31 марта 2019

Задача

Сумма из двух полей выбора не отображается в области Общая цена.

Решение

Создайте функцию и вызовите ее, чтобы отключить событие onchange, когда в полях выбора выбрано новое значение.

Пример 

  // Get references to the objects you need (<select> and <span>)
    var field_a = document.getElementById('field_a');
    var field_a_price = document.getElementById('field_a_price');

    var field_b = document.getElementById('field_b');
    var field_b_price = document.getElementById('field_b_price');

    // When the list value changes, set the innerHTML of the <span>
    field_a.onchange = function() {
        field_a_price.innerHTML = this.value;
        // Calling new function
        updateTotal();
    };

    field_b.onchange = function() {
        field_b_price.innerHTML = this.value;
        // Calling new function
        updateTotal();
    };

  // New function
  function updateTotal() {
    var p = $('.prices').map(function () { return $(this).text(); }).get();
    var totalPrice = 0;
    $.each(p, function( index, value ) {
      totalPrice = totalPrice + value;
      $('.total_price').text(totalPrice);
    });
  }

Резюме

Я не уверен, что вы пытаетесь сделать со значениями, учитывая, что они имеют запятые.

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

...