JQuery Form Olayları

Bu yazımızda Jquery form olayları yani submit, change, focus ve blur olaylarını örnek uygulamalar üzerinden anlatacağım.

Olay dediğimiz kavram aslında hepimizin bildiği bir konu. Bir butonun tıklanması, fare ile bir nesnenin üzerine gelinmesi, bir formun doldurulup gönderilmesi, klavyeden bir tuşa basılması, açılır menüden seçim yapılması vb.. gibi aksiyonlar birer olaydır.

Örneklerimizde ilk önce olayın ne olduğundan bahsedip, ilgili örneğin kodlarını paylaşacağım. Yazının sonunda ise bu kodların uygulamasını paylaşacağım. 

Uygulama üzerinde her bir olayı ayrı ayrı incelerseniz daha iyi anlaşılacaktır.

 Önemli  Yazacağınız Jquery kodlarını, 

içerisinde yazmaya çalışın. Neden bu şekilde yazmamız gerektiği ile ilgili bir yazım bulunuyor. Bunun için JQuery Document Ready Nedir? yazımı okuyabilirsiniz.

JQUERY FORM OLAYLARI

1 – JQUERY SUBMİT OLAYI

Bir form üzerindeki gerekli alanların hepsini doldurduktan sonra bu bilgiler üzerinde işlem yapmak için formu submit ederiz. 

Submit olayı formun gönderilmesidir.

Örneğin id’si submit olan form, Gönder butonuna tıklanarak submit edildiğinde alert ile istediğimiz bir mesajı verelim.

Html ve Jquery Kodları

2 – JQUERY CHANGE OLAYI

Change, bir durumun değişmesi olayıdır. Örneğin id’si change olan bir dropdown listemiz (açılır liste) olsun.

Listeye İstanbul, Ankara ve İzmir illerini ekleyelim. Listeden herhangi birini seçtiğimizde yani bir değişiklik olduğunda change olayını tetikleyip alert ile istediğimiz bir mesajı verelim.

Html ve Jquery Kodları

3 – JQUERY FOCUS VE BLUR OLAYLARI

Bir input öğesi içerisine fare ile tıklayıp odaklanması olayı bir focus olayıdır.

Fare ile input öğesi dışında bir yere tıklanması ise blur olayıdır.

Örneğimizde id’si focus-blur olan input’un focus olayında arkaplan rengini #E7512F, blur olayında ise arkaplan rengini #FFFFFF yapalım.

Html ve Jquery Kodları

Tüm Jquery form olaylarını tek uygulama üzerinde birleştirdim. Tek tek uygulayarak inceleyebilirsiniz.

Jquery form olayları hakkında daha fazla bilgi almak isterseniz JQuery sitesini ziyaret edebilirsiniz.

Şu yazılar da ilginizi çekebilir.

JQuery Fare Olayları

JQuery Klavye Olayları

JQuery Scroll, Select, On, Off, One Olayları

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link