jquery bootstrapValidator:多个输入值的总和,如果不等于其他输入字段,则禁用提交按钮
jquery bootstrapValidator : sum of multiple input values and if not equal other input fileds disable submit button
我有两个输入字段类别。 div class total_investement_expenses class 有 4 个输入字段。每个都有一个 class pr,第二个 div class source_income 有两个输入字段,每个都有一个 class 名称 prc.
$('.source').on('input','.prc',function(){
totalSum=0;
$('.source .prc').each(function(){
var inputVal = $(this).val();
if($.isNumeric(inputVal)) {
totalSum += parseFloat(inputVal);
}
})
$('#sourceSum').text(totalSum);
});
// console.log(totalSum+" self_inital and loan values");
$('.expense').on('input','.pr',function(){
var totalExpense=0;
$('.expense .pr').each(function(){
var inputVal = $(this).val();
if($.isNumeric(inputVal)) {
totalExpense += parseFloat(inputVal);
}
})
$('#totalExpense').text(totalExpense);
});
$('form[data-toggle="validator"]').bootstrapValidator();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<div class="total_investement_expenses">
<div class="form-group expense">
<label for="land_expenses">Land Expenses</label><input type="text" name="land_expenses" value="" class="form-control pr" id="land_expenses" required="required" placeholder="" />
</div>
<div class="form-group expense">
<label for="equipment_machinery">Equipment Machinery</label> <input type="text" name="equipment_machinery" value="" class="form-control pr" id="equipment_machinery" required="required" placeholder="" />
</div>
<div class="form-group expense">
<label for="asset_capital">Asset Capital</label> <input type="text" name="asset_capital" value="" class="form-control pr" id="asset_capital" required="required" placeholder="" />
</div>
<div class="form-group expense">
<label for="working_capital">Working Capital</label> <input type="text" name="working_capital" value="" class="form-control pr" id="working_capital" required="required" placeholder="" />
</div>
<div class="form-group">
<label>Total</label> <span id="totalExpense"></span>
</div>
</div>
<div class="source_income" >
<div class="form-group source">
<label for="self_inital">Own Equity</label>
<input type="text" name="self_inital" value="" class="form-control prc" id="self_inital" placeholder="" required="required" />
</div>
<div class="form-group source">
<label for="loan">Loan</label> <input type="text" name="loan" value="" class="form-control prc" id="loan" placeholder="" />
</div>
<div class="form-group">
<label>Total:</label> <span id="sourceSum"> </span>
</div>
</div>
我可以看到两个输入字段的总和 class 但我的问题是如果不等于我想使用回调禁用提交按钮。
我不确定我是否正确理解了你的问题。但是,我已经为您准备了一个示例片段,以防万一我的假设是否正确。那么,您必须将总变量移出事件范围,并在这些事件发生后执行简单检查。像:
let totalSum = 0;
let totalExpense = 0;
$('.source').on('input', '.prc', function() {
totalSum = 0;
$('.source .prc').each(function() {
var inputVal = $(this).val();
if ($.isNumeric(inputVal)) {
totalSum += parseFloat(inputVal);
}
})
$('#sourceSum').text(totalSum);
checkSubmitBtn();
});
// console.log(totalSum+" self_inital and loan values");
$('.expense').on('input', '.pr', function() {
totalExpense = 0;
$('.expense .pr').each(function() {
var inputVal = $(this).val();
if ($.isNumeric(inputVal)) {
totalExpense += parseFloat(inputVal);
}
})
$('#totalExpense').text(totalExpense);
checkSubmitBtn();
});
//$('form[data-toggle="validator"]').bootstrapValidator();
checkSubmitBtn();
function checkSubmitBtn() {
$('#submitBtn').prop('disabled', totalExpense != totalSum || (totalSum == 0 || totalExpense == 0));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>
<div class="form-group expense">
<label for="working_capital">Working Capital</label> <input type="text" name="working_capital" value="" class="form-control pr" id="working_capital" required="required" placeholder="" />
</div>
<div class="form-group">
<label>Total</label> <span id="totalExpense"></span>
</div>
</div>
<div class="source_income">
<div class="form-group source">
<label for="self_inital">Own Equity</label>
<input type="text" name="self_inital" value="" class="form-control prc" id="self_inital" placeholder="" required="required" />
</div>
<div class="form-group source">
<label for="loan">Loan</label> <input type="text" name="loan" value="" class="form-control prc" id="loan" placeholder="" />
</div>
<div class="form-group">
<label>Total:</label> <span id="sourceSum"> </span>
</div>
<input type='button' value='Submit' id='submitBtn' />
</div>
我有两个输入字段类别。 div class total_investement_expenses class 有 4 个输入字段。每个都有一个 class pr,第二个 div class source_income 有两个输入字段,每个都有一个 class 名称 prc.
$('.source').on('input','.prc',function(){
totalSum=0;
$('.source .prc').each(function(){
var inputVal = $(this).val();
if($.isNumeric(inputVal)) {
totalSum += parseFloat(inputVal);
}
})
$('#sourceSum').text(totalSum);
});
// console.log(totalSum+" self_inital and loan values");
$('.expense').on('input','.pr',function(){
var totalExpense=0;
$('.expense .pr').each(function(){
var inputVal = $(this).val();
if($.isNumeric(inputVal)) {
totalExpense += parseFloat(inputVal);
}
})
$('#totalExpense').text(totalExpense);
});
$('form[data-toggle="validator"]').bootstrapValidator();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<div class="total_investement_expenses">
<div class="form-group expense">
<label for="land_expenses">Land Expenses</label><input type="text" name="land_expenses" value="" class="form-control pr" id="land_expenses" required="required" placeholder="" />
</div>
<div class="form-group expense">
<label for="equipment_machinery">Equipment Machinery</label> <input type="text" name="equipment_machinery" value="" class="form-control pr" id="equipment_machinery" required="required" placeholder="" />
</div>
<div class="form-group expense">
<label for="asset_capital">Asset Capital</label> <input type="text" name="asset_capital" value="" class="form-control pr" id="asset_capital" required="required" placeholder="" />
</div>
<div class="form-group expense">
<label for="working_capital">Working Capital</label> <input type="text" name="working_capital" value="" class="form-control pr" id="working_capital" required="required" placeholder="" />
</div>
<div class="form-group">
<label>Total</label> <span id="totalExpense"></span>
</div>
</div>
<div class="source_income" >
<div class="form-group source">
<label for="self_inital">Own Equity</label>
<input type="text" name="self_inital" value="" class="form-control prc" id="self_inital" placeholder="" required="required" />
</div>
<div class="form-group source">
<label for="loan">Loan</label> <input type="text" name="loan" value="" class="form-control prc" id="loan" placeholder="" />
</div>
<div class="form-group">
<label>Total:</label> <span id="sourceSum"> </span>
</div>
</div>
我可以看到两个输入字段的总和 class 但我的问题是如果不等于我想使用回调禁用提交按钮。
我不确定我是否正确理解了你的问题。但是,我已经为您准备了一个示例片段,以防万一我的假设是否正确。那么,您必须将总变量移出事件范围,并在这些事件发生后执行简单检查。像:
let totalSum = 0;
let totalExpense = 0;
$('.source').on('input', '.prc', function() {
totalSum = 0;
$('.source .prc').each(function() {
var inputVal = $(this).val();
if ($.isNumeric(inputVal)) {
totalSum += parseFloat(inputVal);
}
})
$('#sourceSum').text(totalSum);
checkSubmitBtn();
});
// console.log(totalSum+" self_inital and loan values");
$('.expense').on('input', '.pr', function() {
totalExpense = 0;
$('.expense .pr').each(function() {
var inputVal = $(this).val();
if ($.isNumeric(inputVal)) {
totalExpense += parseFloat(inputVal);
}
})
$('#totalExpense').text(totalExpense);
checkSubmitBtn();
});
//$('form[data-toggle="validator"]').bootstrapValidator();
checkSubmitBtn();
function checkSubmitBtn() {
$('#submitBtn').prop('disabled', totalExpense != totalSum || (totalSum == 0 || totalExpense == 0));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>
<div class="form-group expense">
<label for="working_capital">Working Capital</label> <input type="text" name="working_capital" value="" class="form-control pr" id="working_capital" required="required" placeholder="" />
</div>
<div class="form-group">
<label>Total</label> <span id="totalExpense"></span>
</div>
</div>
<div class="source_income">
<div class="form-group source">
<label for="self_inital">Own Equity</label>
<input type="text" name="self_inital" value="" class="form-control prc" id="self_inital" placeholder="" required="required" />
</div>
<div class="form-group source">
<label for="loan">Loan</label> <input type="text" name="loan" value="" class="form-control prc" id="loan" placeholder="" />
</div>
<div class="form-group">
<label>Total:</label> <span id="sourceSum"> </span>
</div>
<input type='button' value='Submit' id='submitBtn' />
</div>