Tutorial jQuery 5 : Form Events & Variables

Pada tutorial ini, kita akan membuat form html yang berisi input-input. Ketika user menginputkan nilai ke dalam text field, maka nilai text field tersebut akan ditampilkan ke layar melalui method alert.

Di form yang kedua, kita akan membuat ketika nilai zip code dimasukkan, maka otomatis akan muncul state dan city nya di text field yang lainnya.

Method dan event yang berlaku di tutorial ini diantaranya : submit(), click dblclick(), focus(). 

index.html

forms.js

Result : 

tutorial jquery event Tutorial jquery event

Dari forms.js kita bisa melihat untuk masing-masing event-effects. Untuk yang pertama, ketika form disubmit dengan menekan tombol submit query (kalau nilai attribut “value” dikosongkan, maka munculnya tulisan Submit Query pada tombol) maka akan muncul alert yaitu nilai yang diisikan oleh user pada text field.

Pada events yang kedua, ketika tombol Get Location yang mempunyai id=loc_button di klik atau di double klik (multiple event di jquery bisa dilakukan dengan dipisahkan oleh spasi) maka di text field lain yang mempunyai id=entered_city_state akan berisi nilai yang diinput oleh user ditambah  tulisan ” is for NJ”, maksudnya kode zip New Jersey. Ini masih di hard code, untuk selanjutnya kita akan membuat dynamic.

Di events yang ketiga, ketika kursor berada di dalam textfield (on focus), maka tulisan Enter Location yang mempunyai id=city_display akan berubah menjadi ‘About to type: ‘.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.