• php
  • 11239
  • 15-7-2008
  • Egypt-IT.com
    • ان شاء الله فى الدرس دا
    هنعمل سكربت بسيط يقوم بالتحقق من 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>

    فى السطر الاول عملنا مربع نص اسمة 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 البسيطة
    <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
    فى هذا الملف يتم التاكد من الاسم المدخل فى مربع النص موجود ومتاح للتسجيل ام لا
    <?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\";
    }
    ?>
    فى السطر الثالث قمنا بعمل مصفوفة تحتوى على الاسماء الغير متاحىة للتسجيل
    لتجربة الاسكربت اضغط هنا
    الاسكربت مرفق كامل
    http://www.traidnt.net/vb/attachment.php?attachmentid=269113&d=1215191998 وبالتوفيق
    المصدر: http://www.traidnt.net/vb/showthread.php?t=890585
    كن أول من يقيم الموضوع
    12345