Доброго времени суток 🙂
В этой статье я расскажу Вам об одном интересном, маленьком скрипте, который поможет Вам справится с заменой значения внутри поля input. Суть скрипта в том, чтобы в зависимости от выбранного пункта с помощью select дописывать определенное значение в поле ввода. Может быть непонятным, зачем это делать. Ведь если есть select, то он сразу может передать значение в форму и все. К чему заморачиваться с переносом значения в поле ввода?
Недавно ко мне обратились с просьбой помочь реализовать следующую возможность. Имелась форма заказа звонка, в которой использовалась маска ввода номера. О ней я писал в статье - Маска ввода номера телефона. Так вот, маска задается один раз и менять ее посетитель сайта не мог. Заказчику нужно было осуществить задумку, где бы можно было выбирать разные маски ввода в зависимости от страны проживания. Чтобы человек когда выбирал страну, в поле ввода менялся вид маски.
Немного размыслив, я пришел к идеи, что выбор страны можно осуществить с помощью поля select. Но вот как его значение перенести в поле input? Для этого было принято решение использовать jQuery. По этому для начала, чтобы все работало, нам нужно подключить библиотеку jQuery. Если на Вашем сайте ранее уже подключалась такая библиотека, то делать этого не нужно. Если же нет, то добавьте перед закрывающим тегом /head такую строку:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Далее я подключал маску ввода номера. Если вы будете использовать скрипт в других целях, то естественно Вам этого делать не нужно. Если же тоже хотите менять маску ввода, то подключите, как это описано в статье о маске. Ссылку на статью я упомянул выше.
Теперь нужно написать сам HTML код, в котором будет размещаться наша форма и поля ввода.
<form method="post" action="" id="form_slct">
<select id="opt_ph">
<option disabled selected>Выберите страну</option>
<option value="+38 999 999 9999" >+38 Украина</option>
<option value="+375 999 999">+375 Беларусь</option>
<option value="+7 999 999 9999">+7 Россия</option>
</select>
<br>
<input id="telephone" name="telephone" maxlength="30" placeholder="Введите номер" value="" autocomplete="off" type="tel">
<br>
<input class="btn" id="button" value="Заказать" type="button"></div>
</form>
По коду видно, что это самая обычная форма, которая имеет раскрывающийся список - select. Поле ввода телефонного номера и кнопка для отправки формы. Главным тут является список. Он имеет пункты - option. Пунктов можете добавлять сколько угодно. Названия указывайте в зависимости от того что нужно. Параметр value, нужно указывать таким, каким Вы хотите, чтобы он добавился в поле ввода input. Как видите в коде я указал форматы маски. Теперь в зависимости от выбранной страны, добавится нужный формат маски.
select - имеет id - opt_ph. Это важный момент, он пригодится в будущем. Так же id есть и у поля ввода и имеет название - telephone. Он тоже нам пригодится.
Теперь перейдем к самому скрипту, что будет выполнять перенос значения из select в input. Сам скрипт очень простой и имеет лишь несколько строк.
<script type="text/javascript" >
$(function(){
$('#opt_ph').change(function(){
var curcolor = $('#opt_ph :selected').val();
$("#telephone").mask(curcolor);
})
});
</script>
Это функция, в которой мы указываем во второй строке айди списка. Создаем переменную, значение которой равно выбранному пункту нашего выпадающего списка. Ну, а далее указываем нашему полю ввода параметр маски. Как в статье о маске параметр задается вручную
$("#tel").mask("+38(999) 999-9999");
То тут вид маски равен выбранному пункту. Как писал выше у каждого пункта задан свой value который соответствует нужному виду маски.
$("#telephone").mask(curcolor);
Вот и вся хитрость задуманного. Просто замена значения и все. Аналогичным способом, можно например задавать определенный текст или передать какие-то знаки / цифры в текстовое поле.
Если развить эту тему, то данный скрипт можно изменить и направить в нужное русло для переноса данных в форме. Надеюсь кому-то пригодится данный материал и Вы сможете воспользоваться моим способом.
На этом все, спасибо за внимание. 🙂