İnputlara girilen değeri otomatik toplama

Bu örneğimizde inputlara girilen tüm rakamları eşzamanlı olarak toplayacağız. 
Öncelikle jquery "keyup" metodu ile inputa değer girildiğinde fonksiyonumuzu çalıştıracağız. Ardından fonksiyonda toplama işlemimii yapıp html ile "toplam" classlı span elementini içine yazdıracağız. 

<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$.fn.sumValues = function() {
var sum = 0; 
this.each(function() {
if ( $(this).is(':input') ) {
var val = $(this).val();
 
} else {
var val = $(this).text();
}
sum += parseFloat( ('0' + val).replace(/[^0-9-.]/g, ''), 10 );
});
return sum;
};

$(document).ready(function() {
$('input.deger').bind('keyup', function() { 
$('span.toplam').html( $('input.deger').sumValues() );
});
});
</script>

 


Değer 1: <input type="text" name="deger1" class="deger" /><br/>
Değer 2: <input type="text" name="deger2" class="deger" /><br/>
Değer 3: <input type="text" name="deger3" class="deger" /><br/>
Değer 4: <input type="text" name="deger4" class="deger" /><br/>
Değer 5: <input type="text" name="deger5" class="deger" /><br/>
Toplam Değer: <span class="toplam"></span>

Programın Çıktısı

Mesaj ve Yorumlar

Yorum Sayısı (0)

ÜYE YORUMLARI

Çevrimiçi :
8
Günlük :
109
Haftalık :
335
Aylık :
1389
Copyright © 2010 İşbara Alp Sönmez – Programlama Örnekleri. Her hakkı saklıdır. www.alpsonmez.com Bu sitedeki herhangi bir içeriğin, "herhangi bir sitede veya forumda" iznim dışında paylaşım yapılması durumunda hukuki dava açacağımı tarafınıza arz ederim. "Öğrenciler dilediği gibi kullanabilir."