入力フィールドの合計は勘定残高を超えることはできません

Question

私はユーザーに各製品の入力フィールドを含む特定の製品にドル金額を追加させようとしています。トリッキーな部分は、すべてのフィールドの合計がアカウントの残高を超えることはできません。

すべての入力フィールドが残高以上であるかどうかを検出し、残高以上の残高を持つ入力フィールドを設定する方法を理解できないようです。または、残りの残高がすでにゼロである場合、入力フィールドに入力された数値はゼロに切り替わり、アクションは発生しません。

ここでJSFiddleを作成しました。 https://jsfiddle.net/12agemfe/1/

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; 
 
    } 
 
});

<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>

Answer 1

私は少しあなたのjsfiddleからフォークでスクリプトを変更しました。ここにある - https://jsfiddle.net/xqhnyf0k/2/

最も重要な変更は、付加価値（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; 
} 

その他の変更は、浮動小数点演算と浮動小数点演算への固定変換によって接続されます。例FOから：は（http://www.w3schools.com/jsref/jsref_tofixed.asp）をtoFixedので

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

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

への変更が重要であるあなたはどこの数字上の文字列ではないで操作を行うように、数値を文字列に変換します。方法~fixedはプレゼンテーションにのみ使用してください。

Answer 2

私はあなたがこのスクリプトから欲しいと思っていることをしました。
見てください。

var qty = $('input[type=text]'); 
 
var accountbalance = parseInt($('#accountbalance').text()); 
 
var removebalance; 
 
var newbalance; 
 
var inputCounter = 0; // zero-based 
 

 
$('input').on('focusout', function() { 
 
    //set removebalance to zero each time 
 
    removebalance = 0; 
 

 
    //check number iput and die if letters or negative number 
 
    if (!$.isNumeric($(this).val()) || $(this).val() < 0) { 
 
     $(this).val(0); 
 
     return false; 
 
    } 
 

 
    //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)); 
 
    $('#accountbalance').text(newbalance.toFixed(2)); 
 

 
    //Needs to set input to zero and not update #accountbalance 
 
    //if entering more than #account balance 
 
    if (newbalance < 0) { 
 
     //alert('You Can Not Cash out more than your Balance!'); 
 
     return false; 
 
    } 
 

 
    // Set values to fixed on focusout 
 
    thisValtoFixed = parseFloat($(this).val()).toFixed(2); 
 
    $(this).val(thisValtoFixed); 
 
}); 
 

 
//Cant submit if input is more than balance 
 
$('#submit').click(function() { 
 
    if (newbalance < 0) { 
 
     //alert('You Can Not Cash out more than your Balance!'); 
 

 
     // Correcting last input 
 

 
     $(qty).each(function() { 
 
      var tempAmount = parseFloat($(this).val()); 
 
      if (tempAmount > 0) { 
 
       $(this).val(tempAmount.toFixed(2)); 
 
       inputCounter++; 
 
      } 
 
     }); 
 

 
     // set corrected value 
 
     var lastInputAmount = parseFloat($(qty).eq(inputCounter - 1).val()); 
 
     var correctedInputValue = lastInputAmount + newbalance; 
 

 
     $(qty).eq(inputCounter - 1).val(correctedInputValue.toFixed(2)); 
 
     alert('You Can Not Cash out more than your Balance!\n\nWe corrected your last amount to ' + correctedInputValue.toFixed(2)); 
 
\t \t 
 
     // Show a zero balance 
 
     $('#accountbalance').text(0.00); 
 
     newbalance = 0; 
 
\t \t 
 
     
 
     // Change the submit button for "Submit like this?" 
 
     $("#submit").text("Submit like this?"); 
 
     return false; 
 
    }else{ 
 
    \t // Ok to submit!! 
 
     alert("Submitted."); 
 
    } 
 
});

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

<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>