Javascript kullanarak, web tasarım uygulamalarınızdaki form yapılarına nasıl müdahale edileceğine dair kısa bir hatırlatma yapıp, form içindeki verileri sıfırlama (reset) üzerine bir uygulama yapacağız.
Syntax (Gösterim):
Döküman içindeki formların özelliklerine ulaşmamız için genel gösterim aşağıdaki gibidir:
"document.forms[].ozellik"
Örnekler:
- document.forms.length;
- document.forms[0].name;
- document.forms[0].id;
- document.forms[0].title;
- document.forms[0].submit();//ilk formu göndermek için
- document.forms[0].reset();//ilk formu sıfırlamak için
- document.forms[0].elements[0];//ilk formun birinci elemanına ulaşmak için
Uygulama
Aşağıdaki gibi bir formumuz olsun, "Reset" düğmesine tıklandığında form içine girilmiş verileri silelim.
Uygulama:
Html yapısı:
<form action="" method="post" name="formName" id="form1" target="_self">
<table>
<tr><td>Ad:</td><td><input type="text" id="name" name="name"/></td></tr>
<tr><td>E-posta:</td><td><input type="text" id="email" name="email"/></td></tr>
<tr><td> </td><td><input type="reset" id="submit" name="submit" value="Reset" onclick="checkForm();"/></td></tr>
</table>
</form>
Javascript Kodları:
<script type="text/javascript">
function checkForm(){
alert("Form temizlenecek");
document.forms[0].reset();
}
</script>
Çok basit anlamda, reset düğmesine tıklanınca "checkForm();" fonksiyonunu çağrılmasını istedik, ve bu fonksiyonda da sayfa içindeki ilk formumuzu resetledik.
Web tasarım uygulamalarınızda formlara ulaşmak ve bu tip işler yapmak için, formun name özelliğini kullanmak daha pratiktir, şöyleki "document.formName.reset" hali de aynı işlevi yapacaktır. İnceleyiniz:
Javascript Kodları:
<script type="text/javascript">
function checkForm2(){
alert("Form formName temizlenecek");
document.formName2.reset();
}
</script>
Bu kodumuzda "forms[0]" yerine, formun "name" özelliğine atadığımız ismi kullandık(formName2)
Bu yazımızda, web tasarım uygulamalarındaki form nesnesinin "reset" fonksiyonu üzerinde durduk, "submit" işlemi de aynı mantıkdadır...
Kolay gelsin, görüşmek üzere...
