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 opt = this.options[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;
}