ان شاء الله فى الدرس دا
هنعمل سكربت بسيط يقوم بالتحقق من user name متاح للتسجيل او غير متاح باستخدام الاجاكس
اولا كود html
فى السطر الاول عملنا مربع نص اسمة username والقيمة بتاعتة فارغة لاننا فى المربع هنكتب الاسم المراد التاكد من صلاحيتة
فى السطر التانى استخدمنا العنصر المحياد span ولة id=msgbox لعمل تاثير باستخدام الاجاكس
وبين تاجى <head> <head/>
هنكتب جملة الاتصال بمكتبة الاجاكس
واستخدام الاجاكس فى اظهار الرسالة وذلك باستخدام كودا javascript التالى
فى هذا الملف يتم التاكد من الاسم المدخل فى مربع النص موجود ومتاح للتسجيل ام لا
لتجربة الاسكربت اضغط هنا
الاسكربت مرفق كامل
https://www.traidnt.net/vb/attachment.php?attachmentid=269113&d=1215191998 وبالتوفيق
هنعمل سكربت بسيط يقوم بالتحقق من user name متاح للتسجيل او غير متاح باستخدام الاجاكس
اولا كود html
<div align=\'center\' > User Name : <input name=\"username\" type=\"text\" id=\"username\" value=\"\" maxlength=\"15\" />
<span id=\"msgbox\" style=\"display:none\"></span> </div>
<span id=\"msgbox\" style=\"display:none\"></span> </div>
فى السطر الاول عملنا مربع نص اسمة username والقيمة بتاعتة فارغة لاننا فى المربع هنكتب الاسم المراد التاكد من صلاحيتة
فى السطر التانى استخدمنا العنصر المحياد span ولة id=msgbox لعمل تاثير باستخدام الاجاكس
وبين تاجى <head> <head/>
هنكتب جملة الاتصال بمكتبة الاجاكس
<script src=\"jquery.js\" type=\"text/javascript\" language=\"javascript\"></script>
والوقتى هنعمل خاصية focus out من مربع النص هنقوم باستدعاء الملفuser_availability.php واستخدام الاجاكس فى اظهار الرسالة وذلك باستخدام كودا javascript التالى
<script language=\"javascript\">
$(document).ready(function()
{
$(\"#username\").blur(function()
{
$(\"#msgbox\").removeClass().addClass(\'messagebox\').text(\'Checking...\').fadeIn(\"slow\");
// التحقق من اسم المستخدم باستخدام الاجاكس
$.post(\"user_availability.php\",{ user_name:$(this).val() } ,function(data)
{
if(data==\'no\') //فى حالة اليوزر غير متاح
{
$(\"#msgbox\").fadeTo(200,0.1,function()
{
$(this).html(\'اسم المستخدم غير متاح\').addClass(\'messageboxerror\').fadeTo(900,1);
});
}
else
{
$(\"#msgbox\").fadeTo(200,0.1,function()
{
$(this).html(\'اسم المستخدم متاح للتسجيل\').addClass(\'messageboxok\').fadeTo(900,1);
});
}
});
});
});
</script>
والان مع ملف index.php مع بعض لمسات ال css البسيطة
{
$(\"#username\").blur(function()
{
$(\"#msgbox\").removeClass().addClass(\'messagebox\').text(\'Checking...\').fadeIn(\"slow\");
// التحقق من اسم المستخدم باستخدام الاجاكس
$.post(\"user_availability.php\",{ user_name:$(this).val() } ,function(data)
{
if(data==\'no\') //فى حالة اليوزر غير متاح
{
$(\"#msgbox\").fadeTo(200,0.1,function()
{
$(this).html(\'اسم المستخدم غير متاح\').addClass(\'messageboxerror\').fadeTo(900,1);
});
}
else
{
$(\"#msgbox\").fadeTo(200,0.1,function()
{
$(this).html(\'اسم المستخدم متاح للتسجيل\').addClass(\'messageboxok\').fadeTo(900,1);
});
}
});
});
});
</script>
<html>
<head>
<title>التحقق من اسم التسجيل بالاجكس</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=windows-1252\">
<script src=\"jquery.js\" type=\"text/javascript\" language=\"javascript\"></script>
<script language=\"javascript\"> $(document).ready(function()
{
$(\"#username\").blur(function()
{
$(\"#msgbox\").removeClass().addClass(\'messagebox\').text(\'Checking...\').fadeIn(\"slow\");
// التحقق من اسم المستخدم باستخدام الاجاكس
$.post(\"user_availability.php\",{ user_name:$(this).val() } ,function(data)
{
if(data==\'no\') //فى حالة اليوزر غير متاح
{
$(\"#msgbox\").fadeTo(200,0.1,function()
{
$(this).html(\'اسم المستخدم غير متاح\').addClass(\'messageboxerror\').fadeTo(900,1);
});
}
else
{
$(\"#msgbox\").fadeTo(200,0.1,function()
{
$(this).html(\'اسم المستخدم متاح للتسجيل\').addClass(\'messageboxok\').fadeTo(900,1);
});
}
});
});
});
</script> <style type=\"text/css\">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.messagebox{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;
}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
} </style>
</head>
<body>
<br>
<br>
<div align=\"center\">
<div class=\"top\" > التحقق من user name بالستخدام الاجاكس - <strong>username 'traidnt', 'egypt-it' ,'ayman' </strong><br>
من فضلك حرك مؤشر الماوس خارج المربع للتحقق من الاسم
</div>
<div >
user name : <input name=\"username\" type=\"text\" id=\"username\" value=\"\" maxlength=\"15\" />
<span id=\"msgbox\" style=\"display:none\"></span>
</div> </div>
</body>
</html>
_____________________________
ملف user_availability.php<head>
<title>التحقق من اسم التسجيل بالاجكس</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=windows-1252\">
<script src=\"jquery.js\" type=\"text/javascript\" language=\"javascript\"></script>
<script language=\"javascript\"> $(document).ready(function()
{
$(\"#username\").blur(function()
{
$(\"#msgbox\").removeClass().addClass(\'messagebox\').text(\'Checking...\').fadeIn(\"slow\");
// التحقق من اسم المستخدم باستخدام الاجاكس
$.post(\"user_availability.php\",{ user_name:$(this).val() } ,function(data)
{
if(data==\'no\') //فى حالة اليوزر غير متاح
{
$(\"#msgbox\").fadeTo(200,0.1,function()
{
$(this).html(\'اسم المستخدم غير متاح\').addClass(\'messageboxerror\').fadeTo(900,1);
});
}
else
{
$(\"#msgbox\").fadeTo(200,0.1,function()
{
$(this).html(\'اسم المستخدم متاح للتسجيل\').addClass(\'messageboxok\').fadeTo(900,1);
});
}
});
});
});
</script> <style type=\"text/css\">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.messagebox{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;
}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
} </style>
</head>
<body>
<br>
<br>
<div align=\"center\">
<div class=\"top\" > التحقق من user name بالستخدام الاجاكس - <strong>username 'traidnt', 'egypt-it' ,'ayman' </strong><br>
من فضلك حرك مؤشر الماوس خارج المربع للتحقق من الاسم
</div>
<div >
user name : <input name=\"username\" type=\"text\" id=\"username\" value=\"\" maxlength=\"15\" />
<span id=\"msgbox\" style=\"display:none\"></span>
</div> </div>
</body>
</html>
فى هذا الملف يتم التاكد من الاسم المدخل فى مربع النص موجود ومتاح للتسجيل ام لا
<?php
//هذا المتغير يحتوى على مصفوفة باسماء المستخدمين الغير متاحين
$existing_users=array(\'traidnt\',\'egypt-it\',\'ayman\');
$user_name=$_POST[\'user_name\'];
//فحص الاسماء والتاكد من خلوها من المصفوفة السابقة
if (in_array($user_name, $existing_users))
{
//اسم المستخدم غير متاح للتسجيل
echo \"no\";
}
else
{
//اسم المستخدم متاخ للتسجيل
echo \"yes\";
}
?>
فى السطر الثالث قمنا بعمل مصفوفة تحتوى على الاسماء الغير متاحىة للتسجيل//هذا المتغير يحتوى على مصفوفة باسماء المستخدمين الغير متاحين
$existing_users=array(\'traidnt\',\'egypt-it\',\'ayman\');
$user_name=$_POST[\'user_name\'];
//فحص الاسماء والتاكد من خلوها من المصفوفة السابقة
if (in_array($user_name, $existing_users))
{
//اسم المستخدم غير متاح للتسجيل
echo \"no\";
}
else
{
//اسم المستخدم متاخ للتسجيل
echo \"yes\";
}
?>
لتجربة الاسكربت اضغط هنا
الاسكربت مرفق كامل
https://www.traidnt.net/vb/attachment.php?attachmentid=269113&d=1215191998 وبالتوفيق
