<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
<body class="p-5">
<div class="form-group">
<label for="input1">Değer 1</label>
<input type="text" id="input1" class="form-control">
</div>
<div class="form-group">
<label for="input2">Değer 2</label>
<input type="text" id="input2" class="form-control">
</div>
<h4>
Toplam:
<span id="totalBadge" class="badge badge-success">₺ 0,00</span>
</h4>
</body>
$(document).ready(function(){
var cleaveInstances = {}; // Nesneleri saklamak için
// Belirlediğin inputları döngüye sok
$('#input1, #input2').each(function(){
var id = $(this).attr('id');
// Her input için yeni bir Cleave oluştur ve listeye ekle
cleaveInstances[id] = new Cleave(this, {
numeral: true,
numeralThousandsGroupStyle: 'thousand',
delimiter: '.',
numeralDecimalMark: ',',
numeralDecimalScale: 2
});
});
// Başlangıç Değerlerini Ata
cleaveInstances['input1'].setRawValue('11111.88');
cleaveInstances['input2'].setRawValue('11111.99');
// Toplama Fonksiyonu
function hesapla() {
var v1 = parseFloat(cleaveInstances['input1'].getRawValue()) || 0;
var v2 = parseFloat(cleaveInstances['input2'].getRawValue()) || 0;
var toplam = v1 + v2;
$('#totalBadge').text('₺ ' + toplam.toLocaleString('tr-TR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}));
}
hesapla(); // İlk açılışta hesapla
// Input değiştikçe otomatik toplasın istersen:
$('#input1, #input2').on('input', hesapla);
});
