arşiv

yazılar buna göre etiketlendi; ‘buton işleme’

JavaScript ile HTML İşleme – 2

Çarşamba, 18 Mar 2009 Soner Gönül View Comments

Javascript’te butonların işlenmesi çok basit bir konudur. HTML’de de submit, normal ve reset olmak üzere 3 farklı tür buton var. Bu butonların tıklanmasıyla oluşabilecek olaylar ise ; onclick, onsubmit ve onreset olaylarıdır.

  1. <html>
  2. <body>
  3. <form name=”form1″ action=”ornek1.html” method=”POST”
  4. onsubmit=”alert(‘OnSubmit Olayı’)”
  5. onreset=”alert(‘OnReset Olayı’)”>
  6. a:<input type=”text” name=”a” value=”"><br>
  7. b:<input type=”text” name=”a” value=”">
  8. <input type=”submit”  value=”Gönder”
  9. onclick=”alert(‘Submit Butonu’)”>&nbsp;
  10. <input type=”reset”  value=”Temizle”
  11. onclick=”alert(‘Reset Butonu’)”>&nbsp;
  12. <input type=”button”  value=”Düğme”
  13. onclick=”alert(‘Normal Buton’)”><br>
  14. </form>
  15. </body>
  16. </html>

Yukarıdaki kodun çıktısı aşağıdaki gibi görünür.

  • Radyo Butonların İşlenmesi

Bunlara ulaşmak için dizi şeklinde form nesnelerinden faydalanılır. Radyo butonun değer value ile, işaretli olup olmadığı ise checked özelliğinden faylanarak bulunabilir. Örneğin;

  1. <html>
  2. <head>
  3. <script type=”text/javascript”>
  4. function radyotest(radyo)
  5. {
  6. if (document.form1.c[0].checked== true)
  7. alert(‘Erkek İşaretlendi’);
  8. else
  9. alert(‘Kadın İşaretlendi’);
  11. deger = radyo.value;
  12. alert (“Seçilen değer” + deger);
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. </form name=”form1″>
  18. <input type=”radio” name=”c” value=”E”
  19. onclick=”radyotest(this)”>Erkek
  20. <input type=”radio” name=”c” value=”K”
  21. onclick=”radyotest(this)”>Kadın
  22. <br>
  23. <input type=”button” value=”Erkek”
  24. onclick=”document.form1.c[0].checked = true;”>
  25. <input type=”button” value=”Kadın”
  26. onclick=”document.form1.c[1].checked = true;”>
  27. </form>
  28. </body>
  29. </html>

Yukarıdaki kodta hangi radyo buton işaretleneckese o butonun checked özelliği true yapılmıştır.

  • Onay Kutularının İşlenmesi

Radyo butonlardan biraz farklı olarak bunlarda taşıdığı değer value ile, işaretli olup olmadığı ise checked özelliği ile belirlenir. Ayrıca checked özelliği ile herhangi bir onay kutusunun işaretlenmesi sağlanabilir.

  1. <html>
  2. <head>
  3. <script type=”text/javascript”>
  4. function onaytest(onaykutu)
  5. {
  6. deger = onaykutu.value;
  7. if (onaykutu.checked == true)
  8. alert (“Seçilen değer ” + deger);
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. </form name=”form1″>
  14. <input type=”checkbox” name=”kitap” value=”oyku”
  15. onclick=”onaytest(this)”>Öykü
  16. <br>
  17. <input type=”checkbox” name=”kitap” value=”roman”
  18. onclick=”onaytest(this)”>Roman
  19. <br>
  20. <input type=”checkbox” name=”kitap” value=”hikaye”
  21. onclick=”onaytest(this)”>Hikaye
  22. <br>
  23. <input type=”button” value=”Öykü”
  24. onclick=”document.form1.kitap[0].checked=true”>
  25. <input type=”button” value=”Roman”
  26. onclick=”document.form1.kitap[1].checked=true”>
  27. <input type=”button” value=”Hikaye”
  28. onclick=”document.form1.kitap[2].checked=true”>
  29. </form>
  30. </body>
  31. </html>

Yukarıdaki kodun çıktısı şu şekilde olur.

Şimdilik bu kadar. Yazının 3. bölümünde açılır kutuların, metin alanların ve JavaScript’le HTML formları dışında nasıl kullanılabileceğine değineceğim.

Esenliklerle kalın ;)

Related posts
Categories: Javascript Tags: ,