Jquery ile Ajax Form Gönderme

Form gönderme işlemlerinde işlemleri kontrol edip, geri dönmek ve sunucu tarafında işleme almak her web programcısının başının ağrısıdır, zira her geri dönüşte sürekli session’a form nesnelerini yazmak, geri dönmek, uyarı vermek gerekir. Bu esnada harcanan trafiği hesaba bile katmıyoruz. Bu kez Jquery’nin $post nesnesi ile nasıl form işlemi yapılacağını anlatmaya çalışacağım.

1.Adım: Formu oluşturuyoruz.

<div id="contact-form">
<form id="contactform" action="javascript:;" method="post">
<h2>Adınız:</h2>
<input id="strName" name="strName" type="text" />
<h2>E-Posta:</h2>
<input id="strEmail" name="strEmail" type="text" />
<h2>Mesajınız</h2>
<textarea id="strMessage" rows="5" name="strMessage"></textarea>
<div id="button-wrapper">
<input id="submitbutton" onclick="ContactForm();" src="img/btn_gonder.jpg" type="image" /></div>
</form></div>

2. Javascript & Jquery

function ContactForm()
{
$(".error").hide();
var hasError = false;
var NameVal = $("#strName").val();
var MessageVal = $("#strMessage").val();
 
if(NameVal == '') {
	$("#strName").before('
<div class="error">Lütfen adınızı giriniz!</div>
');
	hasError = true;
}
 
if(MessageVal == '') {
	$("#strMessage").before('
<div class="error">Lütfen mesaj alanını boş bırakmayınız!</div>
');
	hasError = true;
}
 
if(hasError == false) {
	$("#submitbutton").hide();
	$("#button-wrapper").append('<img id="loading" src="img/loading.gif" alt="İşlem gerçekleştiriliyor." />');
 
	$.post("contact2.asp",
		{ strName:NameVal, strMessage: MessageVal },
			function(data){
				$("#contactform").slideUp("normal", function() {				   
 
					$("#contactform").before('
<div class="info">Bilgileriniz yetkililerimize ulaştırıldı.
 En kısa sürede size geri dönüş yapılacaktır.</div>
');
				});
			}
		 );
}
return false;
}

3.Sunucu Tarafı (ASP)

strName=request.Form("strName")
strMessage=request.Form("strMessage")
'Buradan sonra veritabanı işlemini bu değişkenlere göre gerçekleştirebilirsiniz.

Herkese iyi çalışmalar

Leave a Reply