AnasayfaOluşturduğumuz formlarda bazı alanların zorunlu doldurulmasını isteriz ve bunun için bir denetim gerçekleştirmemiz gerekmektedir.
Bir çok yöntemle bu denetimi gerçekleştirebiliriz ama bana göre en uygun metod jquery ile yaptığımız boş/dolu kontrolüdür. Gerekli olan tek şey jquery.com adresinden jquery kütüphanesini temin edip, sayfamıza include etmek.
Sonrasında formumuza vereceğimiz id değeri ve yazacağımız javascript kodu ile kullanıcı form submit butonuna bastığında verilerin gönderileceği sayfaya geçiş olmadan boş/dolu kontrolü gerçekleşmiş olacaktır.
Örnek kod oluşturalım.
01 <script type="text/javascript" src="js/jquery.js"></script>
02 <script type="text/javascript">
03 $(document).ready( function() {
04 $("#kayitform").submit(function() {
05 if ($("#alan").val()=='') {
06 alert("Lütfen, alan 1 doldurunuz.");
07 return false;
08 }
09 if ($("input[@name='sec']:checked").val()==null) {
10 alert("Lütfen, seçenek 1 veya seçenek 2 işaretleyiniz.");
11 return false;
12 }
13 if ($("#combo").val()=='') {
14 alert("Lütfen, bir değer seçiniz.");
15 return false;
16 }
17 });
18 });
19 </script>
20 <form action="sayfa2.php" method="post" id="kayitform">
21 <label>Alan 1
22 <input type="text" name="alan" id="alan" />
23 </label>
24 <br /><br />
25 <label>
26 <input type="radio" name="sec" id="sec" value="1" />Seçenek 1
27 </label>
28 <label>
29 <input type="radio" name="sec" id="sec" value="2" />Seçenek 2
30 </label>
31 <br /><br />
32 <label>Seçiniz
33 <select name="combo" id="combo">
34 <option value="">Seçiniz</option>
35 <option value="1">Değer 1</option>
36 <option value="2">Değer 2</option>
37 </select>
38 </label>
39 <br /><br />
40 <label>
41 <input type="submit" name="button" id="button" value="Gönder" />
42 </label>
43 </form>
Yazdığımız örnek kodumuzda; normal bir texfield alanı, radio button ve list combo box dolu/boş kontrolü yapılmaktadır.
jQuery ile form alanları dolu mu boş mu kontrolü için çalışır demo sayfasına ve kaynak kodlara aşağıdaki linklerden ulaşabilirsiniz.
Bir çok yöntemle bu denetimi gerçekleştirebiliriz ama bana göre en uygun metod jquery ile yaptığımız boş/dolu kontrolüdür. Gerekli olan tek şey jquery.com adresinden jquery kütüphanesini temin edip, sayfamıza include etmek.
Sonrasında formumuza vereceğimiz id değeri ve yazacağımız javascript kodu ile kullanıcı form submit butonuna bastığında verilerin gönderileceği sayfaya geçiş olmadan boş/dolu kontrolü gerçekleşmiş olacaktır.
Örnek kod oluşturalım.
01 <script type="text/javascript" src="js/jquery.js"></script>
02 <script type="text/javascript">
03 $(document).ready( function() {
04 $("#kayitform").submit(function() {
05 if ($("#alan").val()=='') {
06 alert("Lütfen, alan 1 doldurunuz.");
07 return false;
08 }
09 if ($("input[@name='sec']:checked").val()==null) {
10 alert("Lütfen, seçenek 1 veya seçenek 2 işaretleyiniz.");
11 return false;
12 }
13 if ($("#combo").val()=='') {
14 alert("Lütfen, bir değer seçiniz.");
15 return false;
16 }
17 });
18 });
19 </script>
20 <form action="sayfa2.php" method="post" id="kayitform">
21 <label>Alan 1
22 <input type="text" name="alan" id="alan" />
23 </label>
24 <br /><br />
25 <label>
26 <input type="radio" name="sec" id="sec" value="1" />Seçenek 1
27 </label>
28 <label>
29 <input type="radio" name="sec" id="sec" value="2" />Seçenek 2
30 </label>
31 <br /><br />
32 <label>Seçiniz
33 <select name="combo" id="combo">
34 <option value="">Seçiniz</option>
35 <option value="1">Değer 1</option>
36 <option value="2">Değer 2</option>
37 </select>
38 </label>
39 <br /><br />
40 <label>
41 <input type="submit" name="button" id="button" value="Gönder" />
42 </label>
43 </form>
Yazdığımız örnek kodumuzda; normal bir texfield alanı, radio button ve list combo box dolu/boş kontrolü yapılmaktadır.
jQuery ile form alanları dolu mu boş mu kontrolü için çalışır demo sayfasına ve kaynak kodlara aşağıdaki linklerden ulaşabilirsiniz.