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

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

irbees2008 irbees2008 Опубликовано - 1 - сентября JS
2193 - 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>

Вот пример

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



Можешь почитать и вот эту статейку "Форматирование цифр по октетам на TWIGe"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

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

Теги

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

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [11]
  • Гости: [10]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.436сек
  • Потребление памяти: 6.116 Mb 
  •   Яндекс.Метрика