Хаки и Скрипты Next Generation CMS

Шаблоны заполнения для форм

irbees2008 irbees2008 Опубликовано - 1 - сентября JS
1387 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html

Вот по просьбе Анатолия делаю новый урок по подключению маски для форм с интересными плюшками. Ну егоТЗ это
1.добавление шаблона для поля с телефон в форме обратной связи
2. появление кнопки "отправить" только после заполнения поля телефона.

Итак приступим
1.Скачать архив со скриптом Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковать и залить один из вариантов скрипта в папку JS вашего шаблона.
2.Подключаем файлы jquery и maskedinput в файл main.tpl.

Код:
<script src="{{ tpl_url }}/js/jquery.js"></script>
<script src="{{ tpl_url }}/js/jquery.maskedinput.js" ></script>
Конечно если jquery уже подключен то второй раз подключать не надо
У меня Идентификатор поля с телефоном указано - phone2 так что за место phone2 указывайте свой Идентификатор поля.
Код:
<script>(function( $ ){
var $body;
$(document).ready(function(){
$body = $('body');
$body
.find('[name=fld_phone2]').each(function(){
$(this).mask("+38 (999) 999-99-99", {autoсlear: false});
});
$body.on('keyup','[name=fld_phone2]',function(){
var phone = $(this),
phoneVal = phone.val(),
form = $(this).parents('form');
if ( (phoneVal.indexOf("_") != -1) || phoneVal == '' ) {
document.getElementById('button_on_checkbox').innerHTML = '';
} else {
document.getElementById('button_on_checkbox').innerHTML = '<input {% if (flags.jcheck) %}onclick="return FBF_CHECK();" {% endif %} type="submit" value="{{ lang['feedback:form.request'] }}" class="btn"/>';
}
});
});
})( jQuery );
$('[name=fld_phone2]').attr({'placeholder':'+38 (___) ___-__-__','title':'Формат: +38 (096) 999 99 99'});
</script>
Так выглядит поле с телефоном в исходном коде у меня
Код:
 <input tape="text" name="fld_phone2">
Далее открываем файл site.form.tpl и заменяем кнопку
Код:
<input {% if (flags.jcheck) %}onclick="return FBF_CHECK();" {% endif %} type="submit" value="{{ lang['feedback:form.request'] }}" class="btn"/>
на вот этот код
Код:
<span id="button_on_checkbox"></span>

Вот пример

Заполните ваш телефонный номер :



Можешь почитать и вот эту статейку "Ставим красивые цифровые часы на CSS3 и JQUERY"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [8]
  • Гости: [6]
  • Поисковики: [2] Яндекс, Google
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 34
  • Генерация страницы: 0.132сек
  • Потребление памяти: 5.884 Mb 
  •   яндекс.ћетрика