Question

我尝试让用户将美元金额添加到包含每个产品的输入字段的某些产品中。棘手的部分是所有字段的总和不能超过其帐户余额。

我似乎无法弄清楚如何检测所有输入字段是否超过余额，然后将具有超过余额的输入字段设置为余额。或者，如果剩余余额已经为零，那么输入到输入字段中的数字将切换为零/不会发生任何操作。

我在这里创建了一个JSFiddle。 https://jsfiddle.net/12agemfe/1/

＆＃13;

var qty = $('input[type=text]');
var accountbalance = parseInt($('#accountbalance').text());
var removebalance;
var newbalance;

$('input').on('focusout', function() {
  //set removebalance to zero each time
  removebalance = 0;
  //get total from all input fields
  $(qty).each(function() {
    removebalance += parseFloat($(this).val());
  });
  //set current balance
  newbalance = (parseFloat(accountbalance).toFixed(2) 
                - parseFloat(removebalance).toFixed(2));
  //Needs to set input to zero and not update #accountbalance
  //if entering more than #account balance
  //Needs to correct input value if entered more than remaining balance
  if (newbalance < 0) {
    alert('You Can Not Cash out more than your Balance!');
    return false;
  }
  //once input fields are totaled, update the balance on the screen
  //should not allow negative balance and needs two decimal points
  //  parseFloat.fixedTo(2)
  $('#accountbalance').text(newbalance);
});

//Cant submit if input is more than balance
$('input[type=submit]').click(function() {
  if (newbalance < 0) {
    alert('You Can Not Cash out more than your Balance!');
    return false;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="value[]" value="0.00">
  <input type="text" name="value[]" value="0.00">
  <input type="text" name="value[]" value="0.00">
  <input type="text" name="value[]" value="0.00">
  <input type="text" name="value[]" value="0.00">
</form>

<div id="accountbalance">500</div>
<button id="submit">Submit</button>

＆＃13;

Answer 1

我在你的jsfiddle中略微更改了fork中的脚本。这里是 - https://jsfiddle.net/xqhnyf0k/2/

最重要的变化是 newbalance 低于0的后果。我们必须在这种情况下将输入值更改为值 - （低于0的值）。

if (newbalance < 0) {
 alert('You Can Not Cash out more than your Balance!');
 //my code
 $('#accountbalance').text("0.00"); //set 0 in balance UI
 $(this).val(parseFloat(parseFloat($(this).val())+newbalance).toFixed(2)); //set currently changing input val to val +newbalance so if balance is minus it will left only possible amount
 //end of my code
 return false;
}

其他变化与将转换固定为浮动和浮动操作有关。例如：

newbalance = (parseFloat(accountbalance).toFixed(2) 
            - parseFloat(removebalance).toFixed(2));

到

newbalance = (parseFloat(accountbalance) - parseFloat(removebalance));

更改非常重要，因为 toFixed （http://www.w3schools.com/jsref/jsref_tofixed.asp）会将数字转换为字符串，因此您可以对字符串进行操作，而不是对数字进行操作。方法 toFixed 只能用于演示。

Answer 2

我已经按照这个脚本完成了我认为你想要的东西看看。

＆＃13;

input {
    display: block;
    margin-bottom: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="text" name="value[]" value="0.00">
    <input type="text" name="value[]" value="0.00">
    <input type="text" name="value[]" value="0.00">
    <input type="text" name="value[]" value="0.00">
    <input type="text" name="value[]" value="0.00">
</form>

<div id="accountbalance">500.00</div>
<button id="submit">Submit</button>

＆＃13;

background_thread

＆＃13;

输入字段的总和不能超过帐户余额

2 个答案: