How do i Multiply the Value of a readonly input field and display the result in another field

Question

I have Three input fields, When you input BTC amount in the first field, it gives you the BTC equivalent in USD. Then i added a hidden input field which holds a specific value, let's say "460", Now i want the BTC equivalent in USD to Multiply the "460" and give the result in a readonly input field. Below the code demonstrating my explanation.

 $(".form-control").keyup(function() { //input[name='calc'] let convFrom; if ($(this).prop("name") == "btc") { convFrom = "btc"; convTo = "usd"; } else { convFrom = "usd"; convTo = "btc"; } $.getJSON("https://api.coindesk.com/v1/bpi/currentprice/usd.json", function(data) { var origAmount = parseFloat($("input[name='" + convFrom + "']").val()); var exchangeRate = parseInt(data.bpi.USD.rate_float); let amount; if (convFrom == "btc") amount = parseFloat(origAmount * exchangeRate); else amount = parseFloat(origAmount / exchangeRate); $("input[name='" + convTo + "']").val(amount.toFixed(2)); }); });

 <script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <form> <input type="number" name="btc" class="form-control" id="validationTooltip02" placeholder="BTC"> <input type="number" name="usd" class="form-control" id="a" onkeyup="add()" placeholder="USD" readonly>

The for the multiplication, i added onkeyup function to the USD field,

<script type="text/javascript">
        function add() {
  var x = parseInt(document.getElementById("a").value);
  var y = parseInt(document.getElementById("b").value)
  document.getElementById("c").value = x * y;
}
    </script>

then tried to collect the result by ID into a field using <input name="amount" class="form-control" type="text" placeholder="0.00000" id="c" aria-label="0.00000" readonly>

This works if i remove readonly in the USD field and type directly but does not work with the result of the BTC to USD sum in the field when it's readonly. I hope i was able to explain this. Please help as i am not an expert.

Answer 1

You are mixing up jQuery and JS together ideally stick with one to avoid confusions. You do not need a separate function add the third input value multiplied by the second value.

You can do all that in your API call function. In addition to get the decimals you need to use toFixed() on the final third input amount as well.

Moreover, i would suggest for better user experience use .on function with input which is better then key-up since you have input type number. You can use increment your number by the click on increase in your input and the new values and total will be reflected instantly instead of use clicking or typing again.

Live Working Demo:

 $("#validationTooltip02").on('input', function() { //input[name='calc'] let convFrom; if ($(this).prop("name") == "btc") { convFrom = "btc"; convTo = "usd"; } else { convFrom = "usd"; convTo = "btc"; } $.getJSON("https://api.coindesk.com/v1/bpi/currentprice/usd.json", function(data) { var origAmount = parseFloat($("input[name='" + convFrom + "']").val()); var exchangeRate = parseInt(data.bpi.USD.rate_float); let amount; if (convFrom == "btc") amount = parseFloat(origAmount * exchangeRate); else amount = parseFloat(origAmount / exchangeRate); $("input[name='" + convTo + "']").val(amount.toFixed(2)); //Add here var a = parseFloat($('#a').val()) var b = parseFloat($('#b').val()) var final = a * b//final amount multiplied by 465 $('#c').val(final.toFixed(2)) }); });

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <form> <input type="number" name="btc" class="form-control" id="validationTooltip02" placeholder="BTC"> <input type="number" name="usd" class="form-control" id="a" placeholder="USD" readonly> <input type="hidden" id="b" value="465"> <input name="amount" class="form-control" type="text" placeholder="0.00000" id="c" aria-label="0.00000" readonly> </form>

Answer 2

So, I think you should use your add function in the function you already call on .form-control keyup, like this:

$(".form-control").keyup(function() { //input[name='calc']
  let convFrom;
  if ($(this).prop("name") == "btc") {
    convFrom = "btc";
    convTo = "usd";
  } else {
    convFrom = "usd";
    convTo = "btc";
  }
  $.getJSON("https://api.coindesk.com/v1/bpi/currentprice/usd.json",
    function(data) {
      var origAmount = parseFloat($("input[name='" + convFrom + "']").val());
      var exchangeRate = parseInt(data.bpi.USD.rate_float);      
      let amount;
      if (convFrom == "btc")
        amount = parseFloat(origAmount * exchangeRate);
      else
        amount = parseFloat(origAmount / exchangeRate);
      $("input[name='" + convTo + "']").val(amount.toFixed(2));
      
      // Here goes the content of the add function
      var x = parseInt(document.getElementById("a").value);
      var y = parseInt(document.getElementById("b").value)
      document.getElementById("c").value = x * y;
    });
});