• 245
  • 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>

Вот пример

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



Можешь почитать и вот эту статейку "Меняем фон или шапку сайта по времени года"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

----