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ı,
|
1 2 3 |
$(document).ready(function(){ // Kodlar buraya yazılacak }); |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form id="submit"> <input type="text" placeholder="submit olayı"> <button type="submit">Gönder</button> </form> <script> $(document).ready(function(){ $("#submit").submit(function() { alert("Form gönderildi."); }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<select id="change"> <option>change olayı</option> <option>İstanbul</option> <option>Ankara</option> <option>İzmir</option> </select> <script> $(document).ready(function(){ $("#change").change(function() { alert("change olayı gerçekleşti.") }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<input type="text" id="focus-blur" placeholder="focus ve blur olayı"> <script> $(document).ready(function(){ $("#focus-blur").focus(function() { $(this).css("background-color", "#E7512F"); }); $("#focus-blur").blur(function() { $(this).css("background-color", "#FFFFFF"); }); }); </script> |
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 Scroll, Select, On, Off, One Olayları
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
