jQuery İle Sayfa Yenilemeden Form İle Veri Göndermek
Bu Sistem İle Sayfanızı Yenilemeden jQuery Aracılığıyla Database’inize Veri Kaydetmenizi Sağlayan Bir Sistem. Arzu Ettiğiniz Şekilde Değiştirmek Size Kalmış.
Adım 1 —JavaScript Kodları
$("#form").ajaxForm() — Burdaki #form İfadesi <form> Elementine Ait Olan ID Değeridir. Form’u Gönderdiğimizde Kullanıcağımız ajaxForm() Metodu Formdaki Verileri gonder.php Adlı Dosyamıza Gönderip İşlemleri Yapıcak Ve Son Olarakta #preview Adlı Alanda Gönderdiğimiz Değerleri Bize Göstericek.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#form').ajaxForm( { target: '#preview', success: function() {
$('#formbox').slideUp('fast');
}
});
});
</script>
Adım 2 —index.html
Burda Basit Bir HTML Form Oluşturuyoruz.
<div id="preview"> </div> <div id="formbox"> <form id="form" action="submit.php" method="post"> Name <input type="text" name="name" /> Email <input type="text" name="email" /> Message <textarea name="message"></textarea> <input type="submit" value="Submit"/> </form> </div>
Adım 3 —Database Oluşturalım
Aşşağıdaki kodları phpmyadminden sql bölümünden çalıştırın.
CREATE TABLE `contact` ( `id` int(11) AUTO_INCREMENT PRIMARY KEY, `name` varchar(255) UNIQUE KEY, `email` varchar(100), `message` text UNIQUE KEY, `created_date` int(11), )
Adım 4 —gonder.php’yi Oluşturalım.
<?php include("db.php"); if($_SERVER["REQUEST_METHOD"] == "POST")
{
$name=mysql_real_escape_string($_POST['name']);
$email=mysql_real_escape_string($_POST['email']);
$message=mysql_real_escape_string($_POST['message']); if(strlen($name)>0 && strlen($email)>0 && strlen($message)>0){
$time=time(); mysql_query("INSERT INTO contact (name,email,message,created_date) VALUES('$name','$email','$message','$time')"); echo "<h2>Teşekkürler !</h2>";
}
}
Adım 5 —jQuery Validate Eklentisi
Bu Eklenti Uygulamanın İlk Kodları Arasında Yer Alan jquery.form.js Dosyasındaki Eklentinin Kullanılmasını Sağlayan Kodlardır.
<script type="text/javascript">
$('document').ready(function()
{
$('#form').validate(
{ rules:
{
"name":{ required:true, maxlength:40
},
"email":{ required:true, email:true, maxlength:100
},
"message":{ required:true
}}, messages:
{
"name":{ required:"Bu Alan Zorunludur."
},
"email":{ required:"Bu Alan Zorunludur.", email:"Lütfen Geçerli Bir Mail Adresi Giriniz."
},
"message":{ required:"Bu Alan Zorunludur."
}}, submitHandler: function(form){
$(form).ajaxSubmit({ target: '#preview', success: function() {
$('#formbox').slideUp('fast');
}
});
}
})
});
Adım 6 —db.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "db";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Database Baglantısı Yapılamadı"); mysql_select_db($mysql_database, $bd) or die("Database Bulunamadı");
67 Fan Beğen
43 Takipçi Takip Et
0 Abone Abone Ol
7 Abone Abone Ol
