Bu yazıda JavaScript kullanarak form verilerini nasıl okuyacağınızı göstereceğiz. Öncelikli olaran form verilerini okumak için her bir form elemanının id değerinin olması gerektiğidir.
JavaScript ile form nesnelerinin id değerlerini okuyarak veriler alınabileceği gibi document.forms kullanılarak da form verileri bir paket halinde alınabilir.
document.forms dökümanda bulunan tüm form nesnelerini bir dizi şeklinde tutar. Eğer sayfanızda bir tane form varsa document.forms[0] yaparak forma ulaşabilirsiniz.
Formdaki input nesnelerinin içindeki değerler value özelliği içinde tutulmaktadır. input nesnelerinin value özelliği kullanılarak buradaki veriler okunabilir. Aşağıdaki örneği inceleyelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <form action=""> ad: <input type="text" id="ad"><br> soyad: <input type="text" id="sad"><br> <button type="button" id="btn"> Form Verilerini Oku</button> </form> <script> //btn butonuna tıklama btn.onclick=function(){ console.log( document.forms[0].ad.value ) console.log( document.forms[0].sad.value ) } </script> |
Radio butonlardan seçili olanı okuma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <form action=""> cinsiyet <br> E:<input type="radio" id="cinsE" name="cins" value="Erkek"><br> K:<input type="radio" id="cinsK" name="cins" value="Kadın"><br> <button type="button" id="btn"> Form Verilerini Oku</button> </form> <script> //butona tıklama btn.onclick=function(){ if(document.forms[0].cinsK.checked == true) console.log("Kadın Seçildi") else if(document.forms[0].cinsE.checked == true) console.log("Erkek Seçildi") } </script> |
Checkbox nesneleri de radio butona benzer şekilde aşağıdaki gibi okunabilir.
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 | <form action=""> Hobiler <br> Yüzme:<input type="checkbox" name="hobi[]" id="hobi1" value="Yüzme"> <br> Koşu:<input type="checkbox" name="hobi[]" id="hobi2" value="Koşu"> <br> Kitap: <input type="checkbox" name="hobi[]" id="hobi3" value="Kitap Okuma"> <br> <button type="button" id="btn"> Form Verilerini Oku</button> </form> <script> //butona tıklama btn.onclick=function(){ if(document.forms[0].hobi1.checked == true) console.log(document.forms[0].hobi1.value) if(document.forms[0].hobi2.checked == true) console.log(document.forms[0].hobi2.value) if(document.forms[0].hobi3.checked == true) console.log(document.forms[0].hobi3.value) } </script> |
textarea ve select seçeneklerini seçmek için aşağıdaki value değerleri ile okuma yapılabilir.
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 | <form action=""> Görüş <textarea name="gorus" id="gorus" cols="30" rows="10"></textarea><br> <select name="secim" id="secim"> <option value="1">Seçenek 1</option> <option value="2">Seçenek 2</option> <option value="3">Seçenek 3</option> </select><br> <button type="button" id="btn"> Form Verilerini Oku</button> </form> <script> //butona tıklama btn.onclick=function(){ console.log( document.forms[0].gorus.value ) //textarea okuma console.log(document.forms[0].secim.value) //seçili olanın valuesi gelir. } </script> |
Yorum Yap