Total of input fields should not exceed certain Amount

Question

I have created an Add / Remove input fields. I want to get total of 'Amount' using Javascript which should not exceed 100%. Means the total of amount should not exceed 10000.

Say for example first field will have 3000, second will have 6000 and third will have 1000. If we enter larger number it should not accept it.

var i = 0;

jQuery(document).ready(function($) {
  //fadeout selected item and remove
  $(document).on('click', '#remove-allocation-fields', function(event) {
    event.preventDefault();
    $(this).parent().fadeOut(300, function() {
      $(this).parent().empty();
      return false;
    });
  });

  var rows = '<div class="fund-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>';

  //add input
  $('#add-allocation-fields').click(function() {
    $(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
    i++;
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="panel panel-default">
  <div class="panel-heading">
    <center><b>Allocation of Funds</b></center>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-5">
        <label>Allocation Items <b style="color:#FF0000;">*</b></label>
      </div>
      <div class="col-md-5">
        <label>Amount <b style="color:#FF0000;">*</b></label>
      </div>
      <div class="col-md-2"></div>
    </div>
    <div class="row">
      <div class="col-md-5">
        <div class="form-group">
          <input type="text" class="form-control" name="allocate_items[]" placeholder="">
        </div>
      </div>
      <div class="col-md-5">
        <div class="form-group">
          <input type="text" class="form-control" name="allocate_amount[]" placeholder="">
        </div>
      </div>
      <div class="col-md-2">
        <button type="button" class="btn btn-success" id="add-allocation-fields">
          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
          Add
        </button>
      </div>
    </div>
    <div id="fund-allocation-fields"></div>
    <p class="help-block"><i>Total amount must be equal to the goal amount.</i></p>
  </div>
</div>

Please Help me. Thanks in advance.

Answer 1

If I understand correctly you could do something as simple as:

var val1 = document.getElementById('inputOne').value;
var val2 = document.getElementById('inputTwo').value;
var val3 = document.getElementById('inputThree').value;
if(val1+val2+val3 < 10000){
    // Less then 10000 so do your stuff
} else{
    // More then 10000 so let the user know they went too far
}

You can also do it in jQuery. Just change document.getElementById('inputOne').value to $('#inputOne').val()

If the elements are built dynamically you could just do something like this:

var inputs = Array.from(document.querySelectorAll('.inputsToAdd'));
var number = 100;
document.getElementById('btn').addEventListener('click', ()=>{
  inputs.map(input=>{
    number+=parseInt(input.value);
  })
  if(number<10000)
    console.log(true);
  else console.log(false)
})

Answer 2

This is a bit of a connundrum since you have the ability to add infinite input fields, in common practice this is a bad UI experience but to resolve your issue.

You want to sum all the values on click and if the values are too high throw an error. You can accomplish this by assigning each inputField a class and then summing the collection of that class.

I made a small sample using jQuery, a conditional and .each() like so:

  $('#sum').click(function(){
      var nums = 0
      $('.valueField').each(function(){
        nums += parseInt(this.value)
      });

      nums > 10000 ? console.log("value too high", nums) : console.log("compute works", nums)
    })

See my small demo below:

$('#sum').click(function() {
  var nums = 0
  $('.valueField').each(function() {
    nums += parseInt(this.value)
  });

  nums > 10000 ? alert("value too high", nums) : alert("compute works", nums)

})

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <input type='number' class='valueField' />
  <input type='number' class='valueField' />
  <input type='number' class='valueField' />
  <button id='sum'>Click</button>

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>

</html>