Question

我创建了一个添加/删除输入字段。我想使用不超过100％的Javascript来获取“金额”总计。表示总金额不得超过10000。

例如，第一个字段将有3000，第二个字段将有6000，第三个字段将有1000。如果我们输入较大的数字，则不应接受。

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>

请帮助我。预先感谢。

Answer 1

如果我正确理解，您可以做一些简单的事情：

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
}

您也可以在jQuery中进行操作。只需将document.getElementById('inputOne').value更改为$('#inputOne').val()

如果元素是动态构建的，则可以执行以下操作：

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

这有点麻烦，因为您可以添加无限的输入字段，通常情况下，这是糟糕的UI体验，但可以解决您的问题。

您要对所有单击值进行求和，如果值太高则会引发错误。您可以通过为每个inputField分配一个类，然后对该类的集合求和来完成此操作。

我使用jQuery，条件式和.each()制作了一个小样本，如下所示：

  $('#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)
    })

请参阅下面的小演示

$('#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>

输入字段总数不得超过特定金额

2 个答案: