2833
- 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>У меня Идентификатор поля с телефоном указано - 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">
Код:
<input {% if (flags.jcheck) %}onclick="return FBF_CHECK();" {% endif %} type="submit" value="{{ lang['feedback:form.request'] }}" class="btn"/>Код:
<span id="button_on_checkbox"></span>
Вот пример
Заполните ваш телефонный номер :
Можешь почитать и вот эту статейку "Шпаргалка О TWIGе"
Это тоже интересно
27.11.13FerroMenu JQuery плагин
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
