美国货币格式多文本框

时间:2017-12-12 18:42:00

标签: javascript jquery

我已经建立了这个简单的租金负担能力的java脚本计算器,我所拥有的问题是" Rent Affordability TextBox"在你使用出现在文本框中的小滚动条然后它会格式化之前,我没有正确格式化美国货币格式,我似乎正在对我发生的onclick事件进行某种排序。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  </head>
  <body>

 <style>
 <!--
.currency {
  padding-left:12px;
}

.currency-symbol {
  position:absolute;
  padding: 2px 5px;
}  
 //-->
 </style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
function run(){

var PercentageRate = 40;

var Income = parseInt(document.getElementById('YearlyIncome').value);
var Expenses = parseInt(document.getElementById('MonthlyExpenses').value);

var PercentageCalculated = Income / PercentageRate;

document.getElementById('RentAffordability').value = PercentageCalculated - Expenses;

}
</script>


<script> 
 (function($) {
  $.fn.currencyInput = function() {
    this.each(function() {
      var wrapper = $("<div class='currency-input' />");
      $(this).wrap(wrapper);
      $(this).change(function() {
        var min = parseFloat($(this).attr("min"));
        var max = parseFloat($(this).attr("max"));
        var value = this.valueAsNumber;
        if(value < min)
          value = min;
        else if(value > max)
          value = max;
        $(this).val(value.toFixed(2)); 
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('input.currency').currencyInput();
});

 </script>

<p>Total Yearly Income: <input type="number" class="currency" name="YearlyIncome" id="YearlyIncome"  /></p>

<p>Monthly Expenses: <input type="number" class="currency" name="MonthlyExpenses" id="MonthlyExpenses" /></p>

<p>Rent Affordability: <input type="number" class="currency" name="RentAffordability" id="RentAffordability" /></p>

<button onclick="run()">calculate</button>

  </body>
</html>

1 个答案:

答案 0 :(得分:0)

您只将toFixed应用于初始化阶段,您需要在计算数字后应用此项。

$('#RentAffordability').val((PercentageCalculated - Expenses).toFixed(2));

您可能还希望在应用toFixed之前添加其他条件阶段,例如

    var min = parseFloat($(this).attr("min"));
    var max = parseFloat($(this).attr("max"));
    var value = this.valueAsNumber;
    if(value < min)
      value = min;
    else if(value > max)
      value = max;

 <style>
 <!--
.currency {
  padding-left:12px;
}

.currency-symbol {
  position:absolute;
  padding: 2px 5px;
}  
 //-->
 </style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
function run(){

var PercentageRate = 40;

var Income = parseInt(document.getElementById('YearlyIncome').value);
var Expenses = parseInt(document.getElementById('MonthlyExpenses').value);

var PercentageCalculated = Income / PercentageRate;

//document.getElementById('RentAffordability').value = PercentageCalculated - Expenses;
  $('#RentAffordability').val((PercentageCalculated - Expenses).toFixed(2));
}
</script>


<script> 
 (function($) {
  $.fn.currencyInput = function() {
    this.each(function() {
      var wrapper = $("<div class='currency-input' />");
      $(this).wrap(wrapper);
      $(this).change(function() {
        var min = parseFloat($(this).attr("min"));
        var max = parseFloat($(this).attr("max"));
        var value = this.valueAsNumber;
        if(value < min)
          value = min;
        else if(value > max)
          value = max;
        $(this).val(value.toFixed(2)); 
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('input.currency').currencyInput();
});

 </script>

<p>Total Yearly Income: <input type="number" class="currency" name="YearlyIncome" id="YearlyIncome"  /></p>

<p>Monthly Expenses: <input type="number" class="currency" name="MonthlyExpenses" id="MonthlyExpenses" /></p>

<p>Rent Affordability: <input type="number" class="currency" name="RentAffordability" id="RentAffordability" /></p>

<button onclick="run()">calculate</button>