所有 HTML 字段值的总和不起作用

Question

我在 1 个表单中有近 100 个 HTML 下拉列表，在提交之前，我想计算所有下拉框中所选值的总和。目前，它不起作用。

jQuery:

  <script type="text/javascript">

  $(function () {
      var fields = $('#addFullAuditReport :input').change(calculate);

      function calculate() {
          var score = 0;
          fields.each(function () {
              score += +$(this).val();
          })
           $('#price').html(score.toFixed(2));
      }
  })

  </script>

HTML 表单字段示例：

  <div class="form-group">
    <div class="col-sm-1">1.4</div>
    <label for="1.4" class="col-sm-4 control-label"></label>
    <div class="col-sm-7">
      <select class="form-control" id="input" name="1_4">
        <option value="0">No</option>
        <option value="10">Yes</option>
      </select>
    </div>
  </div>

HTML输出

Total : <u id="price"></u>

表单发起：

{!! Form::open(array('route' => array('addFullHandHygieneAudit'), 
'role'=>'form','id'=>'addFullHandHygieneAudit', 'class'=>'form-horizontal')) !!}

我的问题是 HTML 输出没有添加任何内容。 jQuery 可能是正确的，但在将其添加到字段之前我无法验证它。

如有任何帮助，我们将不胜感激。

Answer 1

看来你打错了，改一下

$('#price').html(price.toFixed(2));

到

$('#price').html(score.toFixed(2));

Answer 2

你应该这样试试

$(function () {
      var fields = $('select').change(calculate);

      function calculate() {
          var score = 0;
          fields.each(function () {
              var val = $(this).val();
              score += isNaN(val) ? 0 : parseFloat(val);
          })
           $('#price').html(score.toFixed(2));
      }
      calculate();
  })

Answer 3

没有 input 个元素出现在 form 中；将选择器更改为 parentElement #input ，例如； $(".form-group #input")。另外，将 score.toFixed(2) 替换为 price.toFixed(2)

$(function() {
    var fields = $(".form-group #input").change(calculate);

    function calculate() {
      var score = 0;
      fields.each(function() {
        score += +$(this).val();
      })
      $('#price').html(score.toFixed(2));
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-sm-1">1.4</div>
  <label for="1.4" class="col-sm-4 control-label"></label>
  <div class="col-sm-7">
    <select class="form-control" id="input" name="1_4">
      <option value="0">No</option>
      <option value="10">Yes</option>
    </select>
  </div>
</div>

Total : <u id="price"></u>

Answer 4

我认为我们不能像这样使用更改事件处理程序。我的建议是：

$(function ()
    {
    $('#addFullAuditReport :input').change(function()
        {
        var fields = $('#addFullAuditReport :input');
        var score = 0;

        fields.each(function() {
            score += $(this).val();
            });

        $('#price').html(score.toFixed(2));
        }
    });

所有 HTML 字段值的总和不起作用

Sum of all HTML field values not working

html

javascript

jquery

blade