Статьи, пособия, примеры начинающим вебмастерам.

Горячий поиск: PHP CSS SEO
Главная » ГлавнаяJavaScript Дублируем данные

Дублируем данные

Иногда веб-разработчикам приходится "заставлять" посетителей вводить одни и те же символы по нескольку раз. Нередки случаи, когда на сайте существуют две формы для ввода данных (например, рабочего и домашнего телефона, или телефона и факса). Или два адреса (адрес прописки по паспорту и фактический адрес жительства)... В то же время очень часто эти данные совпадают - можно ли в этом случае облегчить и ускорить действия посетителя?

Большинство пользователей знакомы с комбинациями клавиш Ctrl+C и Ctrl+V, тем не менее существует достаточно простой способ облегчить посетителю ввод дублирующихся данных. Согласитесь, гораздо удобнее отметить специально предусмотренный чекбокс, чем пользоваться горячими клавишами для копирования и повторной вставки данных (не хочется даже думать о том, что неопытные посетители могут повторно вводить эти данные).
Давайте посмотрим, как это работает в действии.
Удобно? Думаю да - а реализуется все проще простого, никаких громоздких и тяжелых кодов или скриптов нам не понадобится.
Первую форму, долго не думая назовем data_1, а вторую data_2.
Соответственно, в html первая форма будет выглядеть так:
<input name="data_1" type="text" size="14" maxlength="12">
а вторая так:
<input name="data_2" type="text" size="14" maxlength="12">
Чекбокс по событию onClick просто дублирует введенные данные: data_2.value=(this.checked)?data_1.value:''.
Тогда вся строка, описывающая чекбокс будет иметь такой вид:
<input type="checkbox" name="same_mail"
onClick="data_2.value=(this.checked)?data_1.value:''">
Сложно? Ничуть. Удобно? Вполне. Тогда почему бы не пользоваться?
Надеюсь, что ваши посетители оценят вашу заботу об их удобстве и отблагодарят как минимум повторным посещением вашего ресурса.
Если что-то непонятно с примером, готовый исходник можно скачать отсюда.

UPDATE

Сегодня получил вот такое письмо:
Цитата:
Здравствуйте, Webamator.

нашёл вашу страничку - http://webamator.ru/public_34-4_dubliruem_dannye.html

скажите а как сделать то же самое, но для 3 и более форм. я что-то
сам никак не могу сделать наугад, т.к. нет знаний в этом и приходится
просто тыкаться )))

Прошу прощения, что отвечаю не на почту а прямо здесь, но возможно кто-то еще будет искать подобное решение...
Ничего сложного здесь нету, во-первых нужно добавить еще одно поле с уникальным идентификатором (в примере это data_3). А во-вторых по событию onClick также меняем и его значение:
<input type="checkbox" name="same_mail" 
onClick="data_2.value=(this.checked)?data_1.value:'', data_3.value=(this.checked)?data_1.value:''">

Вот модернизированный пример, в котором дублируются две формы
Категория: JavaScript
Опубликовано: 15 июня 2008, Обновлено: 19.01.2013 - 22:26 просмотров: 1741
 (Голосов: 3)

Комментирование данной новости запрещено.
Чужих не бывает

Валидация

Правильний CSS!

Valid XHTML 1.0 Transitional

Статистика

Генерация страницы: 0.32 секунд, SQL-запросов: 10.

Copyright

© 2008-2013 webamator.ru

Условия заимствования материалов.