Question

我有一个表单，用户可以在其中几个下拉字段中的不同选项之间进行选择。根据用户选择，这些值将显示在下拉字段旁边的跨度字段内。

现在，我想计算跨度字段中的所有这些值，以便在提交表单之前可以在表单末尾显示总计金额。

这是我表格的一部分：

<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方法有关吗？

Answer 1

问题

“总价格”区域中不会显示2个选择框的总和。

解决方案

创建一个函数，并在选择框中选择一个新值时调用它以在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返回的类列表中填充数组。

JS-根据跨度/格字段计算价格

1 个答案: