Merhaba arkadaşlar,
Bir formum var ve bu formun geldiği sayfayı yine
ajax ile açıyorum. [
www.gulcemobilya.com.tr adresinde iletişime tıklayınca gelen sayfa]
Bu sayfada bir formum var ve ben bu formun kontrolleri ve sonrasında da action'ını jquery'nin post methodu ile yapmaya çalışyorum. Aslına bakılırsa daha önce birkaç kez kullandım bunu ama aradaki fark bu kez
ajax ile gelen sayfa içinden post etmek olacak. Bu nedenle de id.leri alamıyor sanırım js.
Aynı soruna kodlar üzerinden gidecek olursak...
Bu formun olduğu sayfa:
<form method="post" action="JavaScript:;">
<h2>Adınız:</h2>
<input type="text" name="strName" id="Name" />
<h2>Firma Adı:</h2>
<input type="text" name="strFirm" id="Firm" />
<h2>Telefon:</h2>
<input type="text" name="strTel" id="Tel" />
<h2>E-Posta:</h2>
<input type="text" name="strEmail" id="Email" />
<h2>Mesajınız</h2>
<textarea name="strMessage" id="Message" rows="5" ></textarea>
<div align="right" style="margin:5px 0" id="submitButtonContainer">
<input type="hidden" name="strCommand" value="sendForm" id="submitbutton" />
</div>
</form>
Bu da javascriptimizin özeti, aralara ben burada görülmesi için notlar düştüm bold olarak:
Kod:
$(document).ready(function(){
$("#submitbutton").click(function(){ //Düğmeyi ve diğer field.ları "#id" ile yakaladım.
$(".warning").hide();
var hasError = false;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var FirmVal = $("#Firm").val();
var TelVal = $("#Tel").val();
var NameVal = $("#Name").val(); //Id ile yakaladık.
if(NameVal == '') {
$("#Name").after('<div class="warning">Lütfen adınızı giriniz!</div>');
hasError = true;
}
var EmailVal = $("#Email").val();
if(EmailVal == '') {
$("#Email").after('<div class="warning">Lütfen geçerli bir e-posta adresi giriniz!</div>');
hasError = true;
} else if(!emailReg.test(EmailVal)) {
$("#Email").after('<div class="warning">Lütfen geçerli bir e-posta adresi giriniz!</div>');
hasError = true;
}
var MessageVal = $("#Message").val();
if(MessageVal == '') {
$("#Message").after('<div class="warning">Lütfen mesaj alanını boş bırakmayınız!</div>');
hasError = true;
}
if(hasError == false) {
$(this).hide();
$("#submitButtonContainer").append('<img src="img/loading.gif" alt="Yükleniyor" id="loading" />');
$.post("action.ASP",
{ strName:NameVal, strFirm: FirmVal, strEmail: EmailVal, strTel: TelVal, strMessage: MessageVal },
function(data){
$("#ContactForm").slideUp("normal", function() {
$("#ContactForm").before('<div class="info">Bilgileriniz yetkililerimize ulaştırıldı. <br /> En kısa sürede size geri dönüş yapılacaktır.</div>');
});
}
);
}
return false;
});
});
Çalışan örnek:
www.gulcemobilya.com.tr
Formun olduğu
CSS'siz sayfa:
www.gulcemobilya.com.tr/contact.asp
Şimdiden yardımcı olacak herkese teşekkürler