Shermaine Chaingan Shermaine Chaingan - 3 months ago 10
jQuery Question

Mathematical operation in two base fields

I tried this code to multiple. The scenario should be


  1. if textbox 2 is empty the textbox 1 will multiply in rate

  2. if textbox 1 is empty textbox2 will multiple to rate.



Scenario 1 works perfectly, but the scenario 2 is not.. any help?

<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>

<label>1</label><input type="text" id="quantitytotransferw"/><br><br>
<label>2</label><input type="text" id="quantitytotransfer"/><br><br>
<label>rate</label><input type="text" id="rate"/><br><br>
<label>amount</label><input type="text" id="amount"/><br><br>

</body>
</html>
<script>
$('#rate').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#quantitytotransferw').val());
texttwo = parseFloat($('#rate').val());
var result = textone * texttwo;
$('#amount').val(result.toFixed(2));
});
$('#rate').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#quantitytotransferw').val());
texttwo = parseFloat($('#rate').val());
var result = textone * texttwo;
$('#amount').val(result.toFixed(2));
});

$('#quantitytotransferw').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#quantitytotransferw').val());
texttwo = parseFloat($('#rate').val());
var result = textone * texttwo;
$('#amount').val(result.toFixed(2));


});
$('#quantitytotransfer').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#quantitytotransfer').val());
texttwo = parseFloat($('#rate').val());
var result = textone * texttwo;
$('#amount').val(result.toFixed(2));


});

</script>

Answer

You could use this function, which combines all you had:

$('#rate, #quantitytotransferw, #quantitytotransfer').on('input', function(){
    var qty = +$('#quantitytotransferw').val();
    qty = qty || +$('#quantitytotransfer').val();
    var rate = +$('#rate').val();
    var result = qty * rate;
    $('#amount').val(result.toFixed(2));
});

$('#rate, #quantitytotransferw, #quantitytotransfer').on('input', function(){
    var qty = +$('#quantitytotransferw').val();
    qty = qty || +$('#quantitytotransfer').val();
    var rate = +$('#rate').val();
    var result = qty * rate;
    $('#amount').val(result.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>1</label><input type="text" id="quantitytotransferw"/><br><br>
<label>2</label><input type="text" id="quantitytotransfer"/><br><br>
<label>rate</label><input type="text" id="rate"/><br><br>
<label>amount</label><input type="text" id="amount"/>

Some remarks:

  • You have a lot of repetitive code. Code is more maintainable if you write code only once and call that where needed.
  • The keyup event does not trigger on all possible ways to alter input data. Take for example, a copy/paste action via the context menu. The input event will trigger on any change (in modern browsers).
  • You can use unitary + for conversion of string to number
  • textone is not really a good name for something that is number and not text. Try to give variables meaningful names.
  • You need to check whether the first input is empty or not. I have now tested that the conversion to number is 0, which may or may not be exactly what you want. Anyway, an empty string or 0 in the first input will make the formula take the value of the second input (by using the || operator).