آموزش ساخت یک فرم تماس با ما (Ajax,jQuery)

[negin.server]

خب رسیدیم به بخش داینامیک فرم.

در اینجا باید کد صفحه sent.php رو بنویسید (متغیر to$ ایمیل شماست):

کد PHP:
<?php
if (!empty($_GET['ysubject']) && !empty($_GET['ymsg']) && !empty($_GET['ymail'])) {
$to = 'Your E-Mail';
$subject = $_GET['ysubject'];
$name = $_GET['yname'];
$from = $_GET['ymail'];
$user_message = $_GET['ymsg'];
$body = "\n".
"نام: $name\n".
"ایمیل: $from \n".
"توضیحات: \n ".
"$user_message\n".
$headers = "From: $from \r\n";
$headers . "Reply-To: $from \r\n";
mail($to, $subject, $body, $headers);
echo '<p style="text-shadow: 1px 1px 8px #00cc0e;">عملیات با موفقیت انجام شد</p>';
}
else
{
echo '<p style="text-shadow: 1px 1px 8px #ff0000;">لطفا تمامی فیلدها را پر کنید</p>';
}
?>

و اما فایل app.js:

کد PHP:
// Developed By: R.Farhadian <R3ZA.FARHADIAN> <Http//Www.iReza.Blog.Ir/>
// V.1
function Ajaxrequest(){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
catch (e){
try{
// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
return false;
}
}
}
}
function formget(form, url) {
var poststr = getFormValues(form);
postData(url, poststr);
}
function postData(url, parameters){
var xmlHttp = Ajaxrequest();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
document.getElementById("show").innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET", url+parameters, true);
xmlHttp.send();
}
function getFormValues(formobj){
var str = "";
var valueArr = null;
var val = "";
var cmd = "";
for(var i = 0;i < formobj.elements.length;i++){
switch(formobj.elements[i].type){
case "text":
str += formobj.elements[i].name +
"=" + encodeURI(formobj.elements[i].value) + "&";
break;
case "textarea":
str += formobj.elements[i].name +
"=" + encodeURI(formobj.elements[i].value) + "&";
break;
case "select-one":
str += formobj.elements[i].name +
"=" + formobj.elements[i].options[formobj.elements[i].selectedIndex].value + "&";
break;
case "checkbox":
if(formobj.elements[i].checked == true){
str += formobj.elements[i].name +
"=" + formobj.elements[i].value + "&";
}
break;
}
}
str = str.substr(0,(str.length - 1));
return str;
}


توضیحات فایل app.js:

ما در این فایل یک عملیات سریع ای جکس رو انجام میدیم.
تابع اولی که نوشتم، به طور کلی شیء HttpRequest رو فرهم میکنه. (اگر مرورگر کلا باش مشکل داشته باشه اررور میده)
تابع دوم، اطلاعات فرم رو از زیر فیلثر رد میکنه تا داده ارسال بشن البته صحیح!!!!!
تابع بعدی، وظیفه تبادل اطلاعات و ارسال و دریافت پاسخ رو داره که در بلاک show نمایش داده میشه.
تابع چهارم، اطلاعات فروم رو EncodeURI میکنه و اجازه نمیده داده های غیر استاندارد html ارسال بشن و محیط رو برای ارسال چند متغیر فراهم میکنه.

دانلود