ساخت فرم تماس با ما بصورت Ajax با PHP و jQuery

ساخت فرم تماس با ما بصورت Ajax با PHP و jQuery

امروز در این آموزش قصد داریم تا به شما نحوه ایجاد یک فرم تماس رو بدهیم که بر پایه Ajax می باشد و ارسال اطلاعات بدون بارگذاری مجدد صفحه انجام خواهد شد.

برای مشاهده لینک وارد شود

خوب در شروع کار نگاهی به کدهای HTML می اندازیم.

<div id="main-container">	<!-- The main container element -->

<div id="form-container">	<!-- The form container -->

<h1>Fancy Contact Form</h1>	<!-- Headings -->
<h2>Drop us a line and we will get back to you</h2>

<form id="contact-form" name="contact-form" method="post" action="submit.php">	<!-- The form, sent to submit.php -->

<table width="100%" border="0" cellspacing="0" cellpadding="5">

<tr>
<td width="18%"><label for="name">Name</label></td>	<!-- Text label for the input field -->
<td width="45%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
<!-- We are using session to prevent losing data between page redirects -->

<td width="37%" id="errOffset">&nbsp;</td>
</tr>

<tr>
<td><label for="email">Email</label></td>
<td><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
<td>&nbsp;</td>
</tr>

<tr>
<td><label for="subject">Subject</label></td>

<!-- This select is being replaced entirely by the jqtransorm plugin -->

<td><select name="subject" id="subject">
<option value="" selected="selected"> - Choose -</option>
<option value="Question">Question</option>
<option value="Business proposal">Business proposal</option>
<option value="Advertisement">Advertising</option>
<option value="Complaint">Complaint</option>
</select>          </td>
<td>&nbsp;</td>
</tr>

<tr>
<td valign="top"><label for="message">Message</label></td>
<td><textarea name="message" id="message" class="validate[required]" cols="35" rows="5"><?=$_SESSION['post']['message']?></textarea></td>
<td valign="top">&nbsp;</td>
</tr>

<tr>
<td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>

<!-- A simple captcha math problem -->

<td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
<td valign="top">&nbsp;</td>
</tr>

<tr>
<td valign="top">&nbsp;</td>
<!-- These input buttons are being replaced with button elements -->
<td colspan="2"><input type="submit" name="button" id="button" value="Submit" />
<input type="reset" name="button2" id="button2" value="Reset" />
<?=$str?>

<!-- $str contains the error string if the form is used with JS disabled -->

<img id="loading" src="img/ajax-load.gif" width="16" height="16" alt="loading" />
<!-- the rotating gif animation, hidden by default -->
</td></tr>

</table>
</form>

<?=$success?>
<!-- The $success variable contains the message that is shown if JS is disabled and the form is submitted successfully -->

</div>
</div>	<!-- closing the containers -->

همانطور که در بالا مشاهده می کنید ما کار ثبت نام را در داخل submit.php انجام داده ایم.ما با ایتفاده از این فایل به بررسی فرم ثبت نامی کاربران به صورت ajax و همچنین کاربرانی که js انها غیر فعال است می پردازیم.

سپس ما با استفاده از آرایهSESSION _$ ارزش فیلد های ورودی را پر کرده ایم.این کار باعث میشود تا اطلاعات هنگام تغییر صفحه از بین نروند.

قسمت مهم دیگر نیز کلاس زیر برای فیلد ها است.

classs=”validate[required,custom[onlyLetter]]”

این کلاس کار اعتبار سنجی درستی اطلاعات وارد شده در فیلد ها را بر عهده دارد.

خوب حالا به سراغ نحوه کار پلاگین JQtransform  می رویم.

ما از دو پلاگین جی کوئری استفاده کرده ایم:JQtransform برای استایل تمام عناصر فرم و دیگری formValidator برای اعتبارسنجی در سمت کلاینت.

در ابتدا ما باید کتابخانه های ضروری را وارد کنیم.

<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css" />
<link rel="stylesheet" type="text/css" href="formValidator/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />

<?=$css?> <!-- Special CSS rules, created by PHP -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js"></script>
<script type="text/javascript" src="formValidator/jquery.validationEngine.js"></script>
<script type="text/javascript" src="script.js"></script>

خوب سپس ما نگاهی به فایل اسکریپت می اندازیم.

$(document).ready(function(){
	/* after the page has finished loading */

	$('#contact-form').jqTransform();
	/* transform the form using the jqtransform plugin */

	$("button").click(function(){

		$(".formError").hide();
		/* hide all the error tooltips */
	});

	var use_ajax=true;
	$.validationEngine.settings={};
	/* initialize the settings object for the formValidation plugin */

	$("#contact-form").validationEngine({	/* create the form validation */
		inlineValidation: false,
		promptPosition: "centerRight",
		success :  function(){use_ajax=true},	/* if everything is OK enable AJAX */
		failure : function(){use_ajax=false}	/* in case of validation failure disable AJAX */
	 })

	$("#contact-form").submit(function(e){

			if(!$('#subject').val().length)
			{
				$.validationEngine.buildPrompt(".jqTransformSelectWrapper","* This field is required","error")
				/* a custom validation tooltip, using the buildPrompt method */

				return false;
			}

			if(use_ajax)
			{
				$('#loading').css('visibility','visible');
				/* show the rotating gif */

				$.post('submit.php',$(this).serialize()+'&ajax=1',
				/* using jQuery's post method to send data */

				function(data){
					if(parseInt(data)==-1)
						$.validationEngine.buildPrompt("#captcha","* Wrong verification number!","error");
						/* if there is an error, build a custom error tooltip for the captcha */
					else
					{
						$("#contact-form").hide('slow').after('<h1>Thank you!</h1>');
						/* show the confirmation message */
					}

					$('#loading').css('visibility','hidden');
					/* hide the rotating gif */
				});
			}

e.preventDefault();	/* stop the default form submit */
})

});

متد document).ready)$ باعث میشود تا اسکریپت پس از پایان بارگذاری صفحه اجرا بشود.

سپس ما از متد  ()jqTransform استفاده کردیم توسط پلاگین  jqtransform تعریف میشود.این متد کار تبدیل و استایل تمام عناصر موجود در فرم را بر عهده دارد.

سپس ما پلاگین formValidation را با استفاده از متد ()validationEngine مقدار دهی میکنیم.

همچنین شما توجه کنید که ما از متغییر  use_ajax برای انجام فعل و انفعالات فرم استفاده کرده ایم.

شما در زیر نحوه ارسال و دریافت اطلاعات فرم را مشاهده می کنید.

chart11

خوب حالا شروع به نوشتن استایل ها در داخل فایلی به نام demo.css می کنیم.

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* reset some of the page elements */
	margin:0px;
	padding:0px;
}

body{
	color:#555555;
	font-size:13px;
	background: url(img/dark_wood_texture.jpg) #282828;
	font-family:Arial, Helvetica, sans-serif;
}

.clear{
	clear:both;
}

#main-container{
	width:400px;
	margin:30px auto;
}

#form-container{
	background-color:#f5f5f5;
	padding:15px;

	/* rounded corners */
	-moz-border-radius:12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
}

td{
	/* prevent multiline text */
	white-space:nowrap;
}

a, a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

h1{
	color:#777777;
	font-size:22px;
	font-weight:normal;
	text-transform:uppercase;
	margin-bottom:5px;
}

h2{
	font-weight:normal;
	font-size:10px;

	text-transform:uppercase;

	color:#aaaaaa;
	margin-bottom:15px;

	border-bottom:1px solid #eeeeee;
	margin-bottom:15px;
	padding-bottom:10px;
}

label{
	text-transform:uppercase;
	font-size:10px;
	font-family:Tahoma,Arial,Sans-serif;
}

textarea{
	color:#404040;
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
}

td > button{
	/* A special CSS selector that targets non-IE6 browsers */
	text-indent:8px;
}

.error{
	/* this class is used if JS is disabled */
	background-color:#AB0000;
	color:white;
	font-size:10px;
	font-weight:bold;
	margin-top:10px;
	padding:10px;
	text-transform:uppercase;
	width:300px;
}

#loading{
	/* the loading gif is hidden on page load */
	position:relative;
	bottom:9px;
	visibility:hidden;
}

.tutorial-info{
	color:white;
	text-align:center;
	padding:10px;
	margin-top:10px;
}

چیز قابل توضیحی در کدهای بالا وجود ندارد به همین دلیل به سراغ نوشتن کدهای PHP می رویم.

Untitled

ابتدا نگاهی به کدهای ابتدایی فایل demo.php می اندازیم.

session_name("fancyform");
session_start();

$_SESSION['n1'] = rand(1,20);	/* generate the first number */
$_SESSION['n2'] = rand(1,20);	/* then the second */
$_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2'];	/* the expected result */

/* the code below is used if JS has been disabled by the user */
$str='';
if($_SESSION['errStr'])	/* if submit.php returns an error string in the session array */
{
	$str='<div class="error">'.$_SESSION['errStr'].'</div>';
	unset($_SESSION['errStr']);	/* will be shown only once */
}

$success='';
if($_SESSION['sent'])
{
	$success='<h1>Thank you!</h1>';	/* the success message */

	$css='<style type="text/css">#contact-form{display:none;}</style>';
	/* a special CSS rule that hides our form */

	unset($_SESSION['sent']);
}

همانطور که مشاهده می کنید ما از آرایه SESSION_$ برای ذخیره دو عدد تصادفی و نتیجه آن استفاده کرده ایم.ما از این برای استفاده در کد امنیتی در submit.php

استفاده خواهیم کرد.

در آخر هم ما تعدادی کد CSS نوشتیم تا قسمت هایی از فرم را برای کاربرانی که جاوااسکریپت آنها غیر فعال است مخفی نماید.

require "phpmailer/class.phpmailer.php";

session_name("fancyform");	/* starting the session */
session_start();

foreach($_POST as $k=>$v)
{
	/* if magic_quotes is enabled, strip the post array */
	if(ini_get('magic_quotes_gpc'))
	$_POST[$k]=stripslashes($_POST[$k]);

	$_POST[$k]=htmlspecialchars(strip_tags($_POST[$k]));
	/* escape the special chars */
}

$err = array();

/* some error checks */
if(!checkLen('name'))
	$err[]='The name field is too short or empty!';

if(!checkLen('email'))
	$err[]='The email field is too short or empty!';
else if(!checkEmail($_POST['email']))
	$err[]='Your email is not valid!';

if(!checkLen('subject'))
	$err[]='You have not selected a subject!';

if(!checkLen('message'))
	$err[]='The message field is too short or empty!';

/* compare the received captcha code to the one in the session array */
if((int)$_POST['captcha'] != $_SESSION['expect'])
	$err[]='The captcha code is wrong!';

/* if there are errors */
if(count($err))
{
	/* if the form was submitted via AJAX */
	if($_POST['ajax'])
	{
		echo '-1';
	}

	/* else fill the SESSION array and redirect back to the form */
	else if($_SERVER['HTTP_REFERER'])
	{
		$_SESSION['errStr'] = implode('<br />',$err);
		$_SESSION['post']=$_POST;

		header('Location: '.$_SERVER['HTTP_REFERER']);
	}

	exit;
}

/* the email body */
$msg=
'Name:	'.$_POST['name'].'<br />
Email:	'.$_POST['email'].'<br />
IP:	'.$_SERVER['REMOTE_ADDR'].'<br /><br />

Message:<br /><br />

'.nl2br($_POST['message']).'

';

$mail = new PHPMailer();	/* using PHPMailer */
$mail->IsMail();

$mail->AddReplyTo($_POST['email'], $_POST['name']);
$mail->AddAddress($emailAddress);
$mail->SetFrom($_POST['email'], $_POST['name']);
$mail->Subject = "A new ".mb_strtolower($_POST['subject'])." from ".$_POST['name']." | contact form feedback";

$mail->MsgHTML($msg);

$mail->Send();

unset($_SESSION['post']);	/* unsetting */

/* the form was successfully sent */
if($_POST['ajax'])
{
	echo '1';
}
else
{
	$_SESSION['sent']=1;

	if($_SERVER['HTTP_REFERER'])
		header('Location: '.$_SERVER['HTTP_REFERER']);

	exit;
}

/* some helpful functions */
function checkLen($str,$len=2)
{
	return isset($_POST[$str]) && mb_strlen(strip_tags($_POST[$str]),"utf-8") > $len;
}

function checkEmail($str)
{
	return preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $str);
}

شما باید بررسی کنید که آیا متغیر  [‘POST[‘ajax _$ تعیین شده باشد وبه درستی عمل نماید.اگر به خاطر داشته باشید ما قبلا مقدار آن را در بالا در script.js برای بدست آوردن اطلاعات توسط ajax تعیین کردیم.

دو متغییر SESSION_$ به نام های errStr و post برای تبادل اطلاعات بین فرم و submit.php هنگامی که js غیر فعال باشد به کار گرفته میشوند.

post شامل آرایه POST_$ است که ما داده ها را ارسال می کنیم و آن فیلد های فرم را پر می کنند.

پایان

+3
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۲ دیدگاه ها

  1. سلام

    آقا من با این همه کد چیکار کنم ؟

    میشه لطفا همه رو آماده و زیپ کنی و بذاری برای دانلود؟؟؟

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


پنج − = 2

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>