[英]How To Display Query Result From Entered Value of Input Field To Another Input Field
[英]How do i Multiply the Value of a readonly input field and display the result in another field
我有三個輸入字段,當您在第一個字段中輸入 BTC 金額時,它會為您提供 BTC 等值的美元。 然后我添加了一個包含特定值的隱藏輸入字段,比如說“460”,現在我希望以美元為單位的 BTC 乘以“460”並在只讀輸入字段中給出結果。 下面的代碼展示了我的解釋。
$(".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>
對於乘法,我在 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>
然后嘗試使用<input name="amount" class="form-control" type="text" placeholder="0.00000" id="c" aria-label="0.00000" readonly>
通過 ID 將結果收集到一個字段中
如果我在 USD 字段中刪除 readonly 並直接鍵入,但是當它是 readonly 時,它不適用於該字段中的 BTC 到 USD 總和的結果。 我希望我能夠解釋這一點。 請幫助,因為我不是專家。
您將jQuery
和JS
混合在一起,最好堅持使用一個以避免混淆。 您不需要單獨的函數添加第三個輸入值乘以second
值。
您可以在API
調用函數中完成所有這些操作。 除了獲得decimals
之外,您還需要在final
第三個輸入amount
上使用toFixed()
。
此外,為了更好的用戶體驗,我建議使用.on
input
功能,這比key-up
更好key-up
因為您有input
類型編號。 您可以通過單擊輸入中的增加來使用increment
您的數字,新值和總數將立即反映,而不是再次單擊或輸入。
現場工作演示:
$("#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>
所以,我認為你應該在你已經在.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.