如何在不在html和jquery中输入任何值的情况下一起添加静态值

Question

我想自动将两个静态值一起添加到文本框中并在第三个框内显示总量，但它不起作用。

$(document).ready(function() {
  $('#txt1, #txt2').keyup(function() {
    var res = parseFloat($('#txt1').val()) || 0;
    var ser = parseFloat($('#txt2').val()) || 0;

    $('#total').val(res + ser);


  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-3 col-sm-3">
  <label>Text 1<span>*</span></label>
  <input type="number" class="form-control dec" id="txt1" name="txt1" value="30">

  <div class="help-block with-errors"></div>
</div>


<div class="form-group col-md-3 col-sm-3">
  <label>Text 2<span>*</span></label>
  <input type="number" class="form-control dec" id="txt2" name="txt2" value="50">

  <div class="help-block with-errors"></div>
</div>

<div class="form-group col-md-3 col-sm-3">
  <label>Total<span>*</span></label>
  <input type="text" class="form-control" id="total" name="txt3">

  <div class="help-block with-errors"></div>

Answer 1

在ducument.ready和keyup上调用函数

  function calc() {
    var res = parseFloat($('#txt1').val()) || 0;
    var ser = parseFloat($('#txt2').val()) || 0;

    $('#total').val(res + ser);


  }

$(document).ready(function() {
  $('#txt1, #txt2').keyup(calc);
  calc();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-3 col-sm-3">
  <label>Text 1<span>*</span></label>
  <input type="number" class="form-control dec" id="txt1" name="txt1" value="30">

  <div class="help-block with-errors"></div>
</div>


<div class="form-group col-md-3 col-sm-3">
  <label>Text 2<span>*</span></label>
  <input type="number" class="form-control dec" id="txt2" name="txt2" value="50">

  <div class="help-block with-errors"></div>
</div>

<div class="form-group col-md-3 col-sm-3">
  <label>Total<span>*</span></label>
  <input type="text" class="form-control" id="total" name="txt3">

  <div class="help-block with-errors"></div>

Answer 2

  

我想自动将两个静态值一起添加到文本框中并在第三个框中显示总金额，但它不起作用。

将ADD操作解压缩到一个函数，即：compute()并在DOM完全加载后执行该函数。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#txt1, #txt2').keyup(compute);
  compute();
});

function compute() {
  var res = parseFloat($('#txt1').val()) || 0;
  var ser = parseFloat($('#txt2').val()) || 0;

  $('#total').val(res + ser);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-3 col-sm-3">
  <label>Text 1<span>*</span></label>
  <input type="number" class="form-control dec" id="txt1" name="txt1" value="30">

  <div class="help-block with-errors"></div>
</div>


<div class="form-group col-md-3 col-sm-3">
  <label>Text 2<span>*</span></label>
  <input type="number" class="form-control dec" id="txt2" name="txt2" value="50">

  <div class="help-block with-errors"></div>
</div>

<div class="form-group col-md-3 col-sm-3">
  <label>Total<span>*</span></label>
  <input type="text" class="form-control" id="total" name="txt3">

  <div class="help-block with-errors"></div>

</div>

＆＃13;

＆＃13;

＆＃13;