Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

oylama 3/5 yorum 4 yorum yazar Hakan Taşan tarih 24 Haziran 2015

Bu yazıda Javascript ile form (üyelik formu vb.) doldurulunca önceden pasif olarak ayarladığımız submit butonunu aktifleştirmeyi öğreneceğiz. Bunu yaparken jQuery kodu değil sadece Javascript kodu kullanacağız. Bu işlem için 2 tane input, 1 tane checkbox ve 1 tane buton olan bir form oluşturalım. Butonu en başta disabled (pasif) olarak ayarlıyoruz. Formun bütün elemanlarını doldurduğumuzda pasif olan butonu aktifleştireceğiz. Bütün kodları aşağıda bulabilirsiniz. Not: Eğer sadece jQuery kodu ile aynı işlemi yapmak istiyorsanız bu yazıyı okuyabilirsiniz.

Oluşturulan Form

Javascript Kodu

function form_kontrol()
{
    if(document.getElementById("ad").value.length == 0)
        document.getElementById("gonder").disabled = true;
    else if(document.getElementById("soyad").value.length == 0)
        document.getElementById("gonder").disabled = true;
    else if(document.getElementById("kosullar").checked == false)
        document.getElementById("gonder").disabled = true;
    else
        document.getElementById("gonder").disabled = false;
}

 

HTML Kodu

<div id="uyelik_formu">
    <form action="#" method="post">
        <label>Adı:</label> 
        <input type="text" id="ad" name="ad" onkeyup="form_kontrol()">
        <br><br>
        <label>Soyadı:</label> 
        <input type="text" id="soyad" name="soyad" onkeyup="form_kontrol()">
        <br><br>
        <input type="checkbox" id="kosullar" name="kosullar" onchange="form_kontrol()">Kullanım koşullarını kabul ediyorum.
        <br><br>
        <button type="submit" id="gonder" disabled>Gönder</button>
    </form>
</div>

 

CSS Kodu

#uyelik_formu
{
    padding: 10px;
    width: 350px;
    border: 1px solid black;
}  
label
{          
    float: left;
    width: 150px;
}

 

onizleme

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

4 Yorum


yorum

Hadi

01 Eylül 2018 07:24


Chrome tarayıcı ile Demo sayfasını açıp deneme yaptığımda Gönder butonu hiçbir zaman aktif olmadı.

yorum

Admin

01 Eylül 2018 22:48


Merhaba, tarayıcı versiyonu uyumlu olmayabilir.

yorum

Ramazan Barut

24 Ekim 2020 20:10


tamamda iletişimi nereye göndereceğini nerde belirleyecez?

yorum

Ufukcan Eski

16 Nisan 2021 23:01


Merhaba;
file upload için nasıl yapmalıyız ?