[英]How to use js to calculate input form fields in a sectioned form
我有一个包含 3 个部分的表单，每个部分由一个单选按钮触发。 ，我使用 js 来计算每个部分中两个输入字段的值，不知何故只有第一部分有效。 我乘以的值来自 php 的值
下面是我的表格的 html 代码
<label class="btn btn-outline-primary">
<img src="../app-assets/images/pages/eth.png" height="30" alt="ETH Logo">
<input type="radio" name="option" onchange="hideB(this)" id="eth" value="ETH">
</label>
</div>
<label class="btn btn-outline-primary">
<img src="../app-assets/images/pages/usdt.png" height="30" alt="USDT Logo">
<input type="radio" name="option" onchange="hideC(this)" id="usdt" value="USDT">
</label>
</div>
</div>
<hr>
</div>
<!-- BTC Row -->
<div class="row" id="A">
<label for="value_n">Enter Your amount in USD </label>
<input type="text" id="value_btc" name="value_btc" class="form-control" onkeyup="mult(this.value)" placeholder="Enter Number of Your Value">
</div>
<div class="form-group">
<label for="lastName12">Amount in BTC</label>
<input type="text" class="form-control" id="btc_rate" name="btc_rate" readonly="readonly" placeholder="Amount in BTC" >
</div>
<div class="form-group">
<label for="lastName12">Amount You will Receive (BTC - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_btc" name="receive_btc" readonly="readonly" placeholder="Amount in Naira" >
</div>
<div class="form-group">
<input type="text" class="form-control copy-to-clipboard" id="copy-to-clipboard-input" value="BTC WALLET GOES HERE" readonly>
</div>
</div>
</div>
<!-- ETH Row -->
<div class="row" id="B" style="display:none">
<div class="form-group">
<label for="firstName13">Enter Your amount in USD </label>
<input type="text" id="value_eth" name="value_eth" class="form-control" onkeyup="mult2(this.value)" placeholder="Enter Number of Your Value">
</div>
<div class="form-group">
<label for="lastName12">Amount in ETH</label>
<input type="text" class="form-control" id="eth_rate" name="eth_rate" readonly="readonly" placeholder="Amount in ETH" >
</div>
<div class="form-group">
<label for="lastName12">Amount You will Receive (ETH - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_eth" name="receive_eth" readonly="readonly" placeholder="Amount in ETH" >
</div>
<!-- USDT Row -->
<div class="row" id="C" style="display:none">
<div class="form-group">
<label for="value_usdt">Enter Your amount in USD </label>
<input type="text" id="value_usdt" name="value_usdt" onkeyup="mult3(this.value)" class="form-control" placeholder="Enter Number of Your Value">
</div>
<div class="form-group">
<label for="usdt_rate">Amount in USDT</label>
<input type="text" class="form-control" id="usdt_rate" name="usdt_rate" name="usdt_rate" readonly="readonly" placeholder="Amount in USDT" >
</div>
<div class="form-group">
<label for="receive_usdt">Amount You will Receive (USDT - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_usdt" name="receive_usdt" readonly="readonly" placeholder="Amount in USDT" >
</div>
<button type="submit" class="btn btn-primary mr-1 mb-1">Submit</button>
</div>
</div>
</form>
在我的 js 下方用于计算和自动填充
<script>
function mult(value_btc) {
var btc_rate = "<?php echo $btc_rate; ?>";
var naira_rate = "<?php echo $naira_rate; ?>";
var x, y ;
x = value_btc / btc_rate ;
y = value_btc * naira_rate;
document.getElementById('btc_rate').value = x;
document.getElementById('receive_btc').value = y;
};
</script>
<script>
function mult2(value_eth) {
var x, y ;
x = 23 / 5 ;
y = 10 * 10;
document.getElementById('eth_rate').value = w;
document.getElementById('receive_eth').value = z;
};
</script>
<script>
function mult3(value_usdt) {
var x, y ;
x = 4 / 5 ;
y = 456 * 7 ;
document.getElementById('usdt_rate').innerHtml = x;
document.getElementById('receive_usdt').innerHtml = x;
};
</script>
javascript for hiding and revealing form
<script>
function hideA(x) {
if (x.checked) {
document.getElementById("A").style.display = "flex";
document.getElementById("B").style.display = "none";
document.getElementById("C").style.display = "none";
}
}
function hideB(x) {
if (x.checked) {
document.getElementById("A").style.display = "none";
document.getElementById("B").style.display = "flex";
document.getElementById("C").style.display = "none";
}
}
function hideC(x) {
if (x.checked) {
document.getElementById("A").style.display = "none";
document.getElementById("B").style.display = "none";
document.getElementById("C").style.display = "flex";
}
}
</script>
我将不胜感激任何帮助或指导
它不起作用，因为您的代码包含几个错误：
function mult2(value_eth) {
var x, y;
x = 23 / 5;
y = 10 * 10;
document.getElementById('eth_rate').value = w;
document.getElementById('receive_eth').value = z;
};
value_eth 。document.getElementById('eth_rate').value = w; -> 在哪里声明了w ？ -> 错误document.getElementById('receive_eth').value = z; -> 在哪里声明了z ？ -> 错误function mult3(value_usdt) {
var x, y;
x = 4 / 5;
y = 456 * 7;
document.getElementById('usdt_rate').innerHtml = x;
document.getElementById('receive_usdt').innerHtml = x;
};
value_usdt 。document.getElementById('usdt_rate').innerHtml = x; -> 这是一个输入，所以你不能更新 innerHtml。document.getElementById('receive_usdt').innerHtml = x; -> 这是一个输入，所以你不能更新 innerHtml。我制作了一个 JSFiddle，它可能与您的用例很接近。
https://jsfiddle.net/n0uLbxef/70/
另外，一些提示：
您无需修改 html 即可隐藏或显示某些内容。 我猜你正在使用引导程序。 如果在需要隐藏的部分上选择了输入，只需添加visually-hidden的 class。
假设您的值存储在变量中，请使用 DOM innerHTML属性。
document.getElementById('usdt_rate').innerHtml = x;
有关详细信息，请参阅此w3school-link
当添加不同的值时，如何使用jQuery来添加分段的表单字段并进行更新？
[英]How can i use jQuery to add up sectioned form fields and update when different values are added?
如何计算两个输入表单字段，然后使用JS和Submit按钮将值放在另一个字段中？
[英]How to calculate two input form fields and put the value in another using JS and submit button?
如何计算两个输入表单字段并将值放入另一个而不使用jquery提交表单？
[英]How to calculate two input form fields and put the value in another without submitting the form using jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.