Notice: Undefined index: tekrar in /home/ogznetc1/public_html/waf/wcp_ayar.php on line 54
Jquery ile Dinamik Form Kontrol Yapma | Ogznet.com
Ogznet.com

Jquery ile Dinamik Form Kontrol Yapma

Web sayfanızda bulunan iletişim veya üye formu gibi form bulunan sayfalarında sayfa değiştirmeye gerek kalmadan, doğru veri kontrolü dinamik form kutuları yapın.

Web sayfalarınızda form kontrolü yapmak için pek çok yol vardır. Bazen formu gönderip işlem sayfasından kontrolü yaparız, bazense sayfayı yenilemeden dinamik bir şekilde yapabiliriz. Bu indireceğiniz örnek form ise dinamik bir form kontrol yapıyor. Dosyada bir js, bir form html dosyası, stil dosyası ve işlem dosyası var. Bu örnek formu inceleyerek, kendi sitenizdeki formlara kolayca uydurabilirsiniz.

Dinamik Form Kontrol

Öncelikle aşağıdaki kodları form sayfanızın bulunduğu dosyanın head kodları arasına yerleştirin.

<link rel="stylesheet" type="text/css" href="messages.css" />
<script type="text/javascript" src="messages.js"></script>

Örnek formda şu şekilde olacak:

<form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
<label for="name">Full Name:</label>
<input type="text" name="name" id="name" />
<label for="email">Email Address:</label>
<input type="text" name="email" id="email" />
<label for="gender">Gender:</label>
<select name="gender" id="gender">
<option value ="">Please Select</option>
<option value ="male">Male</option>
<option value ="female">Female</option>
</select>
<label for="message">Message:</label>
<input type="text" name="message" id="message" />
<input type="submit" value="Submit" class="submit" />
</form>

Js dosyamızda da;

var name = form.name.value;
var email = form.email.value;
var gender = form.gender.value;

satırlarına sizin formunuzda yer alan input alanlarını ekleyin. Örneğin mesaj formundaki "konu" kutusu gibi.

var konu = form.konu.value;

Bu şekilde ekleme yapın yada yukarıdakileri sizin formunuza göre düzenleyin. Bu yaptığınız değişiklerin çalışması için alt satırlarda da ekleme yapın yada düzenleme yapın.

 if(konu== "") { inlineMsg('konu','<strong>Hata</strong><br />Lütfen mesajınızın konusunu yazınız.',2); return false; } 

Gibi kod ekleyin yada var olanları kendi input alanlarına göre düzenleyin.

İndireceğiniz dosyada, çalışan bir örnek var zaten. Kolayca düzenleyip sitenize ekleyebilirsiniz.

Yorumlar

  • Bu yazıya henüz yorum yapılmamış. İlk yorumu yapan siz olun!
Yorum Yaz