[英]How do i Multiply the Value of a readonly input field and display the result in another field
I have Three input fields, When you input BTC amount in the first field, it gives you the BTC equivalent in USD.我有三个输入字段,当您在第一个字段中输入 BTC 金额时,它会为您提供 BTC 等值的美元。 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.
然后我添加了一个包含特定值的隐藏输入字段,比如说“460”,现在我希望以美元为单位的 BTC 乘以“460”并在只读输入字段中给出结果。 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,对于乘法,我在 USD 字段中添加了 onkeyup 函数,
<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>
然后尝试使用
<input name="amount" class="form-control" type="text" placeholder="0.00000" id="c" aria-label="0.00000" readonly>
通过 ID 将结果收集到一个字段中
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.如果我在 USD 字段中删除 readonly 并直接键入,但是当它是 readonly 时,它不适用于该字段中的 BTC 到 USD 总和的结果。 I hope i was able to explain this.
我希望我能够解释这一点。 Please help as i am not an expert.
请帮助,因为我不是专家。
You are mixing up jQuery
and JS
together ideally stick with one to avoid confusions.您将
jQuery
和JS
混合在一起,最好坚持使用一个以避免混淆。 You do not need a separate function add the third input value multiplied by the second
value.您不需要单独的函数添加第三个输入值乘以
second
值。
You can do all that in your API
call function.您可以在
API
调用函数中完成所有这些操作。 In addition to get the decimals
you need to use toFixed()
on the final
third input amount
as well.除了获得
decimals
之外,您还需要在final
第三个输入amount
上使用toFixed()
。
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.此外,为了更好的用户体验,我建议使用
.on
input
功能,这比key-up
更好key-up
因为您有input
类型编号。 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.您可以通过单击输入中的增加来使用
increment
您的数字,新值和总数将立即反映,而不是再次单击或输入。
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>
So, I think you should use your add function in the function you already call on .form-control
keyup, like this:所以,我认为你应该在你已经在
.form-control
keyup 上调用的函数中使用你的 add 函数,就像这样:
$(".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;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.