Update input value with Bootstrap touchspin

Question

I’m used a input "quantity" which multiplies the value of the input "unit value" and updates the input "total value". So far working all right.

So I started using the bootstrap-touchspin :

<input type="number" name="p_t11" id="P1103_QTDE" value="1" size="30" maxlength="4000">
    
<input type="text" name="p_t13" id="P1103_TOTAL" value="100,00" size="30" maxlength="4000">


 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.2.5/jquery.bootstrap-touchspin.min.js"></script>

$("input[id='P1103_QTDE']").TouchSpin({
  min: 0,
  max: 10000000000,
  boostat: 5,
  forcestepdivisibility: "none",
  step: 1,
  maxboostedstep: 10,
  buttondown_class: "btn btn-ciano btn-xs btn-mob",
  buttonup_class: "btn btn-ciano btn-xs btn-mob",
  mousewheel: "true"
});

The input "total" does not dynamically update the value on the screen, but saves the value correctly. How could I update the "total value" field dynamically by clicking on the "+" and "-" ?

Answer 1

You must track the event change which happens in the input to which the bootstrap-touchspin is associated.

You can do it like this:

$("#P1103_QTDE").TouchSpin({
  min: 0,
  max: 10000000000,
  boostat: 5,
  forcestepdivisibility: "none",
  step: 1,
  maxboostedstep: 10,
  buttondown_class: "btn btn-ciano btn-xs btn-mob",
  buttonup_class: "btn btn-ciano btn-xs btn-mob",
  mousewheel: "true"
});

// daqui para baixo é o que precisas
$("#P1103_QTDE").on('change', function() {
    $('#P1103_TOTAL').val(($(this).val()*100).toFixed(2));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.2.5/jquery.bootstrap-touchspin.min.js"></script>

<input type="number" name="p_t11" id="P1103_QTDE" value="1" size="30" maxlength="4000">
    
<input type="text" name="p_t13" id="P1103_TOTAL" value="100,00" size="30" maxlength="4000">