Маленькая javascript-помощь в заполнении форм

2009.01.02
В CMS RUEN есть управление блоками – специальный встроенный компонент, управляющий подключением других компонентов, и в том числе размещением их блоков на страницах. Например, для добавления той же баннерной растяжки надо будет перейти в управление блоками и там зайти в пункт «Добавление», при этом отобразится большая портянка различных параметров. Один из параметров – идентификаторы срабатывания – фрагменты адреса, при которых система управления подключает тот или иной блок. Как раз этот параметр отображен на скриншоте ниже:


Есть три идентификатора, если в качестве всех идентификаторов указаны минусы, то блок будет отображаться на всех страницах сайта, а если оставить пустые места, то только на главной. В большинстве случаев блоки должны отображаться на всех страницах сразу, а значит везде надо ставить минусы (дефисы). Разумеется, это весьма просто, но обычно хочется сделать как лучше. На скриншоте ниже видно две ссылки, появившиеся в справке:


Если нажать на ссылку «на всех страницах», то везде проставятся минусы, а если нажать «только на главной», то поля очистятся. Удобно? Бесспорно! К тому же ушла вероятность допущения глупых ошибок, типа внесения знака «равно» вместо минуса. А теперь рассмотрим как это было сделано.

Инструкция

Вот так выглядит код поля под первый идентификатор:
1-ый: <input type="text" name="goid1"><br>

С исправлениями для корректной работы JavaScripts стало так:
1-ый: <input type="text" name="goid1" id="goid1"><br>

В коде справки текст на всех страницах была заменён на код:
<a href="#" onclick="document.getElementById('goid1').value = '-'; document.getElementById('goid2').value = '-'; document.getElementById('goid3').value = '-'; return false;">на всех страницах</a>

То же самое проделывается и с текстом только на главной, за исключением того, что в конструкции убираются минусы, то есть пишется так:
<a href="#" onclick="document.getElementById('goid1').value = ''; document.getElementById('goid2').value = ''; document.getElementById('goid3').value = ''; return false;">только на главной</a>

Подробности

Теперь детально, что и зачем делалось.

<input type="text" name="goid1" maxlength="80" id="goid1">

• <input ...> – это форма для ввода информации,
• <input ... type="text"> – информация будет простой строкой текста,
• <input ... name="goid1"> – эта информация будет хранится в переменной «goid1» при отправке в PHP,
• <input ... id="goid1"> – это текстовое поле (форма) будет доступно JavaScript под идентификатором «goid1».

Идём дальше.

<a href="#" onclick="document.getElementById('goid1').value = ''; document.getElementById('goid2').value = ''; document.getElementById('goid3').value = ''; return false;">только на главной</a>

• <a href="#">только на главной</a> – это ссылка,
• только на главной – текст ссылки,
• # – место, куда ссылка ссылается. Ссылка может ссылаться на сайт, страницу, а в этом случае это как бы ссылка на эту же страницу, что необходимо для того, чтобы если ява-скрипт не сработает как надо, то небыло перехода куда-либо.
• <a ... onclick="">...</a> – отработка события «onclick», то есть реакция по нажатию по ссылке; вовнутрь кавычек вписывается необходимый ява-скрипт.

Теперь посмотрим сам java-script:

• return false; – вернуть отказ браузеру, чтобы тот, выполнив ява-скрипт, не попытался перейти по ссылке (напомню, что она – «#»),
• document.getElementById('goid1').value = '-'; – взять документ document, найти на нем элемент с идентификатором goid1 getElementById('goid1') и в его значение value засунуть минус = '-'

Оптимизирующая конструкция была вписана в CMS где-то минуты за две, этот пост писался полчаса с лишним, а экономить она будет всего секунд 10 при добавлении каждого блока. Вот так.

Теги: CMS RUEN, Программирование

Следующий пост: Скачать генератор паролей? Легко! (#37, 2009.01.29)
Предыдущий пост: Смена скина сайта - это просто! (#35, 2008.12.28)

Пост #36. Постоянная ссылка на пост: https://exogens.ru/blog/post/malenkaya-javascript-pomosch-v-zapolnenii-form/