2373
- 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>
Вот пример
Заполните ваш телефонный номер :
Можешь почитать и вот эту статейку "Добавляем пробел после точки или запятой"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.