Method serialize adalah digunakan untuk mengambil value dari sebuah form, jadi disamping kita mengambil form dari satu-satu inputan kita bisa mengambil sekaligus dengan menggunakan method serialize ini, berguna sekali ketika kita mempunyai banyak inputan form, dimana kita bisa mendapatkan semua value yang telah di isi, dan untuk menggunakan method serialize ini ada caranya yang harus di lakukan ya, apa saja itu, simak terus ya teman-teman.
Tujuan menggunakan method serialize adalah kita ingin mendapatkan sebuah value dari sebuah inputan form yang sudah kita isi, dari pada satu-satu, tetapi untuk menggunakannya kita harus menggunakan attribute name di setiap inputannya, jadi teman-teman jangan lupa harus menyisipkan attribute name ya, Method serialize ini berguna sekali ketika kita sudah menggunakan ajax, seperti yang saya tulis di atas dari pada satu persatu untuk mendapatkan valuenya, kita bisa menggunakan method ini. Oke langsung saja, utuk kasus kali ini saya belum menggunakan sebuah ajax ya, dan disini saya membuat beberapa form, dan bisa kita lihat hasilnya yang ada di bawah.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <form> <div class="form-group"> <label for="exampleFormControlInput1">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" name="email"> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Provinsi</label> <select class="form-control" id="exampleFormControlSelect1" name="Provinsi"> <option>Lampung</option> <option>Aceh</option> <option>Riau</option> <option>Jambi</option> <option>Bengkulu</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect2">Ibu Kota</label> <select multiple class="form-control" id="exampleFormControlSelect2" name="IbuKota"> <option>Banda Lampung</option> <option>Banda Aceh</option> <option>Pekanbaru</option> <option>Jambi</option> <option>Bengkulu</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Keterangan</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="keterangan"></textarea> </div> <button class="btn btn-primary btn-xs"> CEK </button> </form> <div class="alert alert-primary output" role="alert"></div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(e){ e.preventDefault() $(".output").text($("form").serialize()); }); }); </script> </body> </html> |
Oke silahkan teman-teman copy, dan sekarang langsung saja kita lihat hasilnya
Bisa dilihat ketika kita memasukannya outputnya bisa kita lihat di bawahnya, dan data value itulah yang nantinya kita akan passing di sebuah webservice ajaxnya, bagaimana mudah-mudahan bermanfaat ya Cara Menggunakan Method Serialize Jquery, sampai jumpa pada artikel berikutnya terimakasih.