JavaScript Form Örnekleri
Text kutusu içine girilen yazıyı Div içine aktarma,Text kutusuna girilen yazıyı select nesnesine option olarak ekleme;Text kutusu boşsa formu göndermeyi iptal etme,JavaScript ile img ekiketindeki resimleri değiştirme.
JavaScript ile Text kutusu içine girilen yazıyı div içine aktarma
var yazi=document.getElementById("yazi");
var goster=document.getElementById("goster");
yazi.onkeyup=function(){
goster.innerHTML=yazi.value;
}
JavaScript ile Text kutusu boşsa formu göndermeyi iptal etme;
var yazi=document.getElementById("yazi");
var gonder=document.getElementById("gonder");
gonder.onclick=function(e){
if(yazi.value=='')
{
e.preventDefault();//varsayılan işlemi önlemek. buradaki işlem submit nesnesinin çalışması onu engellemiş olduk
//return false; //bu tanımlama da doğrudur.
}
}
JavaScript ile Text kutusuna girilen yazıyı select nesnesine option olarak ekleme;
var yazi=document.getElementById("yazi");
var kaydet=document.getElementById("kaydet");
var takim=document.getElementById("takim");
kaydet.onclick=function(e){
var yeniOpt=document.createElement("option");
yeniOpt.value=yazi.value;
yeniOpt.innerHTML=yazi.value;
takim.add(yeniOpt);//select nesnesine yeni bir öge eklenmiştir.
}
JavaScript ile img ekiketindeki resimleri değiştirme;
range nesnesindeki toplam adım 5 tir. 0,1,2,3,4,5
bu adımlar dizideki 00,01,02,03,04,05 resimleri ile eşlerek range nesnesi kaçta ise
resimler dizisindeki resim yollarını src içine aktarılacaktır.
Unutmayın:resim klasörü içinde dizi içindeki resim dosyaları olmak zorundadır.
*/
var resimler=["resim/r00.jpg","resim/r01.jpg","resim/r02.jpg","resim/r03.jpg","resim/r04.jpg"];
var resimNo=document.getElementById("resim-no");
var resim=document.getElementById("resim");
resimNo.onchange=function(e){
resim.src=resimler[resimNo.value];
}
Butona Tıklayınca Sayıyı Arttırma / Azaltma
function arttir(){
var sonuc=document.getElementById("sonuc");
sonuc.value=Number(sonuc.value)+1;
}
function azalt(){
var sonuc=document.getElementById("sonuc");
sonuc.value=Number(sonuc.value)-1;
}
Textarea Nesnesine Girilen Karakter Sayısını Bulma
var yazi=document.getElementById("yazi");
var sayac=document.getElementById("sayac");
yazi.onkeypress=function(){
if(yazi.value.length>=160) return false;
}
yazi.onkeyup=function(e){
sayac.value=(160-yazi.value.length);
}
Select Nesnesindeki Seçili Olan Alanların Toplamını Hesaplama
var sonuc=document.getElementById("sonuc");
var sayilar=document.getElementById("sayilar");
sayilar.onclick=function(){
var toplam=0;
/* tüm option nesnenleri üzerinde dönüş yapıyoruz.*/
for (var i=0, uzunluk=this.options.length; i
/*seçili olan option nesnelerini öğreniyoruz.*/
if ( opt.selected ) {
/*seçili olan option nesneleri üzerinde toplama işlemi yapıyoruz.*/
toplam+=Number(opt.value);
}
}
sonuc.innerHTML=toplam;
}