Тема закрыта
Захожу на страницу http://vms.drweb.com/sendvirus/ и первое, что я вижу на экране через IE - это ошибка на 129 строке (см. скриншот). Опера тоже осталась недовольной ("Inline script thread Error: name: TypeError message: Statement on line 21: Cannot convert undefined or null to Object...").
"Ладно" - думаю, - "бывает, может чего-то не доделано, отправке-то помешать не должно". Но после установки флажка Указана ссылка никаких модификаций формы НЕ произошло, ещё интересней то, что кликнв в любое место страницы форма чудесным образом увеличивалась в высоте на пикселей 12, а область выбора файла превращалась в область указания ссылки (что и требовалось изначально). Обратная модификация тоже сработала только тогда, когда флажок был снят и произведён дополнительный клик по странице.
"Нехорошо это получается" - думаю и уже выбираю просмотр кода страницы...
Открываем код страницы, просматриваем и сразу же находим любопытный код перед самой формой отправки:
<script language="JavaScript">function getEl( elId ){ return document.getElementById( elId );}function validateSNForm(){ if( getEl( "catSelect" ).value < 1 ) { alert( "Пожалуйста выберите категорию запроса!" ); return false; } getEl( "SNForm" ).submit(); return false;}function changeApp(){if (getEl( "hLink" ).checked == true){getEl("inputField").innerHTML = 'Ссылка: <input type="text" name="link" style="width:100%">';}else{getEl("inputField").innerHTML = '<input type="file" name="file" style="width:100%">';}}changeApp();</script>Код функции changeApp() начинает исполняться сразу не загружая до конца страницу. Что же эта функция делает? Довольно изощрённо получается объект hLink (как вы потом увидите это наш чекбокс для установки флажка ), который затем проверяется на то, установлен ли (checked) флаг или нет и в зависимости от положения определяет содержание(innerHTML) объекта inputField (который, как Вы увидите является контейнером для элемента файла или ссылки).Собственно вот она и ошибка - функция начинает работать ДО загрузки самой формы, поэтому ни про объект hLink, ни про объект inputField не знает, и когда мы проходим до проверки условия на установленность флажка - получаем ошибку характера объект не определён. Возникает закономерный вопрос - а зачем вообще запускается эта функция, если она по всем свойства похожа на обработчик событий нашей галочки (объект hLink). Ответ мне не ясен - возможно это была какая-то странная отладка...
Внесём первые коррективы - закомментируем вызов функции changeApp
// changeApp();Итак, ошибка уже не возникает, тем не менее отработка события установки флажка проходит неприятно - приходится дополнительно кликать в пустое место. Что ж... смотрим дальше, на этот раз форму.
<form id="SNForm" method="POST" action="http://vms.drweb.com/sendvirus/" enctype="multipart/form-data"><input type="hidden" name="f" value=""><table width="550"> <tr> <td colspan=2>Для того чтобы Вы гарантировано получили ответ на Ваш запрос, внимательно заполните поля предлагаемой формы.</td> </tr> <tr> <td colspan=2><div id="inputField"><input type="file" name="file" style="width:100%"></div></td> </tr> <tr> <td colspan=2><input type="checkbox" id="hLink" name="hlink" value="t" onChange="changeApp();"><label for="hLink">Указана ссылка</label></td><script type='text/javascript' language='JavaScript'>changeApp();</script> </tr>...Неожиданно снова происходит вызов функции, но уже ПОСЛЕ загрузки наших элементов hLink и inputField, поэтому ошибок не возникает. Отладка??? Удаляем.
Рассмотрим наш «флажок»:
onChange="changeApp();"> _linenums:0'><input type="checkbox" id="hLink" name="hlink" value="t" onChange="changeApp();">Всё оформленно грамотно и верно, но есть проблема событие onChange срабатывает только после потери фокуса объектом, то есть содержимое формы изменится только в том случае, если флажок потеряет фокус (как раз что мы и делали совершая дополнительный клик). Почти у всех HTML объектов есть свойство onClick, которое отрабатывается сразу после клика по элементу, поэтому код должен выглядеть так:onClick="changeApp();"> _linenums:0'><input type="checkbox" id="hLink" name="hlink" value="t" onClick="changeApp();">Ура, форма отрабатывается действительно нормально, но сильно раздражает, когда после установка флажка форма смещается вниз на 12 пикселей. Это происходит потому, что в объекте inputField"><input type="file" name="file" style="width _linenums:100'><div id="inputField"><input type="file" name="file" style="width:100%"></div>inputField, который является всего-лишь слоем появляется дополнительный текстовый элемент Ссылка: (см. скрипт.), а так как объекты файла и ссылки занимают 100% ширины контейнера, то происходит смещение на одну строку и тут возникает закономерный вопрос - а есть ли смысл добавлять слово Ссылка: сверху перед объектом. Ответ да - так становится очевидней с чем ты работаешь: с файлом или всё-таки с ссылкой.Решение в этом случае очень простое, подправляем исходный код страницы добавляя слово Файл: перед объектом формы файла и подправляем наш скрипт:
function changeApp(){if (getEl( "hLink" ).checked == true){getEl("inputField").innerHTML = 'Ссылка: <input type="text" name="link" style="width:100%">';}else{getEl("inputField").innerHTML = '[color="#00FF00"]Файл: <input type="file" name="file" style="width:100%">';}Теперь после включения\отключения флажка форма почти не дрожит, происходит нормальная смена объектов файла на поле для ввода ссылок и на странице не содержится более ошибок и отладочных функций.Полностью подправленная страница есть в аттаче в архиве, чтобы разработчики могли её использовать для исправления страницы.
Искренне ваш Malex.
Прикрепленные файлы:
-
siterrror129.jpg 28,02К
61 Скачано раз
-
page.rar 5,31К
110 Скачано раз
