Ребята с форума завели тему насчёт этой фичи — вот я и решил выложить… За одно для себя взял пару уроков.
Итак. Суть в том, что пользователь при регистрации вводит желаемый логин — переключается на следующее поле, а рядом с полем для логина всплывёт результат. Если такой логин уже есть в системе — тогда нам выдаст соответствующее оповещение… Однако, мы не остановимся и сделаем то же самое для кошелька и WMID\’а.Итак. Суть в том, что пользователь при регистрации вводит желаемый логин — переключается на следующее поле, а рядом с полем для логина всплывёт результат. Если такой логин уже есть в системе — тогда нам выдаст соответствующее оповещение… Однако, мы не остановимся и сделаем то же самое для кошелька и WMID\’а.
Поехали…
То что вы видите на скрине — это было до написания статьи. Пока я писал — я параллельно сделал и для WMID и для кошелька такую примочку.
Делаем всё просто:
1. Открываем register.php и перед:
Добавим:
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(document).ready(function()
{
$("#username").blur(function()
{
$("#msgbox").removeClass().addClass('messagebox').text('Проверка…').fadeIn("slow");
//Проверить существует ли имя
$.post("log_exists.php",{ username:$(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);
});
}
});
});
//для вмид
$("#wmid").blur(function()
{
$("#msgwmidbox").removeClass().addClass('messagebox').text('Проверка…').fadeIn("slow");
//Проверить существует ли имя
$.post("log_exists.php",{ wmid:$(this).val() } ,function(data)
{
if(data=='no') //если имя не доступно
{
$("#msgwmidbox").fadeTo(200,0.1,function() //начнет появляться сообщение
{
$(this).html('Пользователь с таким WMID уже зарегистрирован').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgwmidbox").fadeTo(200,0.1,function()
{
//тут прописывается сообщение о доступности имени
$(this).html('WMID доступен для регистрации').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
//для кошелька
$("#pemail").blur(function()
{
$("#msgpursebox").removeClass().addClass('messagebox').text('Проверка…').fadeIn("slow");
//Проверить существует ли имя
$.post("log_exists.php",{ purse:$(this).val() } ,function(data)
{
if(data=='no') //если имя не доступно
{
$("#msgpursebox").fadeTo(200,0.1,function() //начнет появляться сообщение
{
$(this).html('Пользователь с таким кошельком уже зарегистрирован').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgpursebox").fadeTo(200,0.1,function()
{
//тут прописывается сообщение о доступности имени
$(this).html('WM-кошелёк доступен для регистрации').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
</script>
<style>
.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>
<!—подключили—>
Это мы намутили яваскрипт и прописали стили. Всё делаем, как в том уроке.
Следующий шаг:
2. В этом же файле находим:
Меняем на:
Затем ниже находим:
Меняем на:
И наконец ниже найдём:
И сменим на:
Что мы сделали?
Добавляем к коду каждого поля ввода (инпуту) id, по которому яваскрпит берёт у нас значение. Ну и само собой после каждого инпута мы добавили поле для вывода результата.
3. Cкачиваем архив и кидаем файлы в корень.
Всё. С вас комменты…
Автор публикации
Отправить комментарий
Вы должны быть зарегистрированы чтобы оставить комментарий.
Вы должны быть зарегистрированы чтобы оставить комментарий.