激活单选按钮并计算文本框值
activate radio button and calculate textbox value
我有下面的代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript">
function isNumberKey(as) {
var dd = as.value;
if (isNaN(dd)) {
dd = dd.substring(0, (dd.length - 1));
as.value = dd;
}
}
function activate(){
document.getElementById('rate').readOnly=false;
}
function deactivate(){
document.getElementById('rate').readOnly=true;
var int = document.calc.loan.value;
if(int > 50000 && int < 100000){
document.calc.rate.value=10;
}
if(int > 100000 && int < 150000){
document.calc.rate.value=12;
}
}
function showpay() {
var a = document.calc.loan.value;
var b = document.calc.rate.value;
var c = document.calc.months.value;
var n = c ;
var r = b / (12 * 100);
var p = (a * r * Math.pow((1 + r), n)) / (Math.pow((1 + r), n) - 1);
var prin = Math.round(p * 100) / 100;
document.calc.pay.value = Math.round(prin);
// document.calc.totInt.value = round((prin * c) - a);
// document.calc.totpay.value = round((prin * c) - a);
document.calc.totInt.value = Math.round((prin * c) - a);
document.calc.totpay.value = Math.round(prin * c);
} </script>
</head>
<body class="body">
<header class="mainheader">
<img src="img/logo.gif" alt=""/>
<nav>
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li class="active"><a href="calculators.html">Calculators</a></li>
<li><a href="contactuS.html">Contact Us</a></li>
</ul>
</nav>
</header><br>
<div class="maincontent">
<div class="content" style="width:100%">
<article class="topcontent">
<header><h2 style="align:center" title="firstpost"><p align="center" style="color: #CF5C3F;">Loan Calculator</p></h2></header>
<footer>
<p class="post-info"></p>
</footer>
<content>
<p>
<center>
<form name="calc">
<table width="200" border="1">
<tbody>
<tr>
<th scope="col">Description</th>
<th scope="col">Data Entry</th>
</tr>
<tr>
<td>Principle($)</td>
<td><input type="text" name="loan" id="loan" placeholder="Enter the amount Required" onkeypress="isNumberKey(this)"/>
</td><span id="error"/>
</tr>
<tr>
<td>Do you know Rate of Interest</td>
<td>
<input type="radio" name="radio" value="Yes" onClick="activate()">Yes<br/>
<input type="radio" name="radio" value="No" onClick="deactivate()">No
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Interest(%)</td>
<td><input type="text" name="rate" id="rate" placeholder="Enter the Interest Rate" onkeypress="isNumberKey(this)"/>
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Tenure(in Months)</td>
<td>
<input type="text" name="months" id="months" placeholder="Enter the Tenure in Months" onkeypress="isNumberKey(this)"/>
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>EMI</td>
<td>
<input name="textfield4" type="text" id="pay" placeholder="Your EMI" readonly/></td>
</tr>
<tr>
<td align="center"><input type="button" value="Submit" onClick='showpay()'/></td>
<td align="center"><input type="reset" value="Reset"/></td>
</tr>
<tr>
<td>Total Interest Paid</td>
<td>
<input name="totInt" type="text" id="totInt" placeholder="Total Interest" readonly/></td>
</tr>
<tr>
<td>Total Repay Amount</td>
<td>
<input name="totpay" type="text" id="totpay" placeholder="Total Amount" readonly/></td>
</tr>
</tbody>
</table>
</form>
</center>
</p>
</content>
</article>
</div>
</div>
<footer class="mainfooter">
<p>this is copyright ©</p>
</footer>
</body>
</html>
在这里，我正在努力实现以下目标。
如果用户选择
Yes单选按钮，则利息旁边的文本框应接受手动输入，否则利息应如下所示。如果用户输入的金额在50000到100000之间，则利息应显示15
- 如果用户输入的金额在100000到150000之间，则利息应显示12
- 否则利息应该显示，18
并根据该利息计算金额。
当我输入金额和热门号码时，我无法获得该号码
请告诉我怎样才能得到这个。
感谢
试试这个：）
<script type="application/javascript">
function isNumberKey(id) {
var dd = document.getElementById(id).value;
if (isNaN(dd)) {
dd = dd.substring(0, (dd.length - 1));
document.getElementById(id).value = dd;
}
}
function activate(){
document.getElementById('rate').readOnly =false;
console.log(document.getElementById('rate').readOnly)
}
function deactivate(){
document.getElementById('rate').readOnly =true;
console.log(document.getElementById('rate').readOnly)
var int = document.calc.loan.value;
if(int > 50000 && int < 100000){
document.calc.rate.value=10;
}
if(int > 100000 && int < 150000){
document.calc.rate.value=12;
}
}
function showpay() {
var a = document.calc.loan.value;
var b = document.calc.rate.value ? document.calc.rate.value : 1;
var c = document.calc.months.value;
var n = c ;
var r = b / (12 * 100);
var p = (a * r * Math.pow((1 + r), n)) / (Math.pow((1 + r), n) - 1);
var prin = Math.round(p * 100) / 100;
document.calc.pay.value = Math.round(prin);
// document.calc.totInt.value = round((prin * c) - a);
// document.calc.totpay.value = round((prin * c) - a);
document.calc.totInt.value = Math.round((prin * c) - a);
document.calc.totpay.value = Math.round(prin * c);
}
</script>
<div>
<nav>
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li class="active"><a href="calculators.html">Calculators</a></li>
<li><a href="contactuS.html">Contact Us</a></li>
</ul>
</nav>
</header><br>
<div class="maincontent">
<div class="content" style="width:100%">
<article class="topcontent">
<header><h2 style="align:center" title="firstpost"><p align="center" style="color: #CF5C3F;">Loan Calculator</p></h2></header>
<footer>
<p class="post-info"></p>
</footer>
<content>
<p>
<center>
<form name="calc">
<table width="200" border="1">
<tbody>
<tr>
<th scope="col">Description</th>
<th scope="col">Data Entry</th>
</tr>
<tr>
<td>Principle($)</td>
<td><input type="text" name="loan" id="loan" placeholder="Enter the amount Required" onkeypress="isNumberKey('loan')"/>
</td><span id="error"/>
</tr>
<tr>
<td>Do you know Rate of Interest</td>
<td>
<input type="radio" name="radio" value="Yes" onclick="activate()">Yes<br/>
<input type="radio" name="radio" value="No" onclick="deactivate()">No
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Interest(%)</td>
<td><input type="text" name="rate" id="rate" readonly="" placeholder="Enter the Interest Rate" onkeypress="isNumberKey('rate')" />
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Tenure(in Months)</td>
<td>
<input type="text" name="months" id="months" placeholder="Enter the Tenure in Months" onkeypress="isNumberKey('months')"/>
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>EMI</td>
<td>
<input name="textfield4" type="text" id="pay" placeholder="Your EMI" readonly/></td>
</tr>
<tr>
<td align="center"><input type="button" value="Submit" onclick="showpay()"/></td>
<td align="center"><input type="reset" value="Reset"/></td>
</tr>
<tr>
<td>Total Interest Paid</td>
<td>
<input name="totInt" type="text" id="totInt" placeholder="Total Interest" readonly/></td>
</tr>
<tr>
<td>Total Repay Amount</td>
<td>
<input name="totpay" type="text" id="totpay" placeholder="Total Amount" readonly/></td>
</tr>
</tbody>
</table>
</form>
</center>
</p>
</content>
</article>
</div>
</div>
<footer class="mainfooter">
<p>this is copyright ©</p>
</footer>
</div>
工作小提琴：http://jsfiddle.net/U3pVM/10274/
在angularJS上试试这个方法。
看看这个代码的角度风格。没有Jquery。
HTML
<div ng-app>
<nav>
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li class="active"><a href="calculators.html">Calculators</a></li>
<li><a href="contactuS.html">Contact Us</a></li>
</ul>
</nav>
</header><br>
<div class="maincontent">
<div class="content" style="width:100%">
<article class="topcontent">
<header><h2 style="align:center" title="firstpost"><p align="center" style="color: #CF5C3F;">Loan Calculator</p></h2></header>
<footer>
<p class="post-info"></p>
</footer>
<content ng-controller="CalcCtrl">
<p>
<center>
<form name="calc">
<table width="200" border="1">
<tbody>
<tr>
<th scope="col">Description</th>
<th scope="col">Data Entry</th>
</tr>
<tr>
<td>Principle($)</td>
<td><input type="text" name="loan" id="loan" ng-model="loan" placeholder="Enter the amount Required" ng-change="isNumberKey()"/>
</td><span id="error"/>
</tr>
<tr>
<td>Do you know Rate of Interest</td>
<td>
<input type="radio" name="radio" value="Yes" ng-change="change()" ng-model="rateint">Yes<br/>
<input type="radio" name="radio" value="No" ng-change="change()" ng-model="rateint">No
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Interest(%)</td>
<td><input type="text" name="rate" id="rate" ng-model="rate" placeholder="Enter the Interest Rate" onkeypress="isNumberKey()" ng-disabled="rateint != 'Yes'" />
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Tenure(in Months)</td>
<td>
<input type="text" name="months" id="months" ng-model="months" placeholder="Enter the Tenure in Months" ng-change="isNumberKey()"/>
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>EMI</td>
<td>
<input name="textfield4" type="text" id="pay" ng-model="pay" placeholder="Your EMI" readonly/></td>
</tr>
<tr>
<td align="center"><input type="button" value="Submit" ng-click="showpay()"/></td>
<td align="center"><input type="reset" value="Reset"/></td>
</tr>
<tr>
<td>Total Interest Paid</td>
<td>
<input name="totInt" type="text" ng-model="toInt" id="totInt" placeholder="Total Interest" readonly/></td>
</tr>
<tr>
<td>Total Repay Amount</td>
<td>
<input name="totpay" type="text" ng-model="topay" id="totpay" placeholder="Total Amount" readonly/></td>
</tr>
</tbody>
</table>
</form>
</center>
</p>
</content>
</article>
</div>
</div>
<footer class="mainfooter">
<p>this is copyright ©</p>
</footer>
</div>
JS-
function CalcCtrl($scope) {
$scope.loan = $scope.loan ? $scope.loan : 0
$scope.rate = $scope.rate ? $scope.rate : 1
$scope.months = $scope.months ? $scope.months : 1
$scope.isNumberKey = function() {
var dd = $scope.loan;
if (dd && isNaN(dd)) {
dd = dd.substring(0, (dd.length - 1));
$scope.loan = dd;
}
}
$scope.change = function(){
if ($scope.rateint === 'No'){
var loan = $scope.loan
if(loan > 50000 && loan < 100000){
$scope.rate=10;
}
if(loan > 100000 && loan < 150000){
$scope.rate=12;
}
}
}
$scope.showpay = function() {
var a = $scope.loan;
var b = $scope.rate;
var c = $scope.months
console.log(a,b,c)
var n = c ;
var r = b / (12 * 100);
console.log(b)
var p = (a * r * Math.pow((1 + r), n)) / (Math.pow((1 + r), n) - 1);
var prin = Math.round(p * 100) / 100;
$scope.pay = Math.round(prin);
// document.calc.totInt.value = round((prin * c) - a);
// document.calc.totpay.value = round((prin * c) - a);
$scope.toInt = Math.round((prin * c) - a);
$scope.topay = Math.round(prin * c);
}
}
看看这把小提琴。
http://jsfiddle.net/U3pVM/10271/
在看到angularjs文档后：
https://docs.angularjs.org/api
相关文章：
- 使用D3.js计算带有字母间距的文本长度
- 在Angular中重新使用HTML端的计算文本
- 计算content中的数字总和使用Jquery可编辑文本
- 当用户在文本框中输入日期时，如何计算一年的持续时间
- 使用 jQuery 计算文本框数组中的值
- 如何使用javascript计算文本区域中键入的字符数
- 计算文本区域中的字符数
- 如何使用文本下拉列表中的绑定值来执行计算
- 计算文本块中的字符数，并将其拆分为两列
- jquery中使用文本框的简单计算
- Javascript的Onfocus(）事件未计算文本框值
- 计算文本节点中的字母数
- 根据文本区域中的行计算值/价格
- 自动计算文本框的值
- 如何使用 Angular js 计算网格视图项模板文本框值的两个文本框值
- 如何通过计算用户在文本区域中输入的文本长度来输入特定标签
- 计算后，我将“NaN”发送到文本框
- D3 强制有向节点作为文本 - 计算相对箭头指向位置
- Javascript从文本框实时进行计算
- Twitter文本js，不根据包含带#的URL的文本计算长度
