Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.04.2011, 15:19
Новичок на форуме
Отправить личное сообщение для Smic Посмотреть профиль Найти все сообщения от Smic
 
Регистрация: 14.04.2011
Сообщений: 1

Скрипт по смене стиля в зависимости от содержимого тега
Ребята, срочно требуется ваша помощь. Я недавно только начал заниматься скриптами, и многое для меня ещё незнакомо. А задача встала, котороя требует решения. Если есть возможность помогите со скриптом и, если возможно, с описанием комментариев, чтобы понять почему скрипт такой какой есть, и что откуда взялось.. Если есть решение на jQuery - это будет очень здорово..

Есть такой код.

<form action="" method="post" name="form_name" id="form_name">
<label for="name">Никнейм:
<div style=" background-color:#F00; height:20px" class="d1">
<span style="line-height:20px; color:#FFF"></span>
</div>
</label>
<br>
<input name="name" id="name" type="text" size="30" value=''>
</form>

Изначально див с классом d1 имеет стиль display:none. Когда в поле вносится информация, то, если она неправильна, внутри span появляется текст с описанием ошибки (этот скрипт из интернета есть).
В этот момент, когда в спане length > 2 див с классом d1 должен поменять стиль на display:block

Если есть здесь те, для кого это как семечки, помогите с решением.

Заранее, спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 21.04.2011, 11:43
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

В том виде, в котором Вы изложили свой пример - это не javascript. Это HTML. В большинстве случаев содержимое формы (в т.ч. поля INPUT) отправляется на сервер, проверяется на сервере на корректность введенных данных и отправляется обратно уже измененный html-код формы, в т.ч. с сообщением об ошибке выделенным цветом. При формировании этого кода на сервере класс "d1" (с display:none) подменяется на "d2" (с display:block), а в <span> вставляется текст ошибки. Это называется с перезагрузкой страницы.

Если же Вы хотите всё это делать без перезагрузки страницы, если Вы хотите делать проверку корректности введенных данных прямо на клиентской стороне (без отправки данных на сервер), то необходимо:
1. написать JavaScript создания (create) Вашей формы и навесить обработчики событий на отправку формы (submit), либо на событие нажатия клавиш INPUT (onkeydown).
2. если принципиально надо оставить html-код формы, то сначала снабдите необходимые теги формы корректными идентификаторами, например,
<div id="mama">.....</div>...<span id="papa">.....</span>
Затем, используя document.getElementById("mama") найти на форме необходимые элементы и в javascript опять же навесить на них функции (смены класса, проверки ввода и т.д.)
примечание: не используйте в качестве идентификатора слово "name" - будут проблемы...
3. Выбрать способ который будет отправлять данные на сервер. Например, можно использовать XMLHttpRequest, в котором на событие onreadystatechange повесить функцию, которая наконец изменит класс необходимого DIV_a, т.е. сделает это:
document.getElementById("mama").className = "d2";
Вот и все "семечки".
Ответить с цитированием
  #3 (permalink)  
Старый 21.04.2011, 12:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Smic,Можно функцию которая добавляет текст в спан, дополнить, чтоб она и делала ещё этот спан видимым.
Ответить с цитированием
  #4 (permalink)  
Старый 21.04.2011, 13:03
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от рони Посмотреть сообщение
Можно функцию которая добавляет текст в спан, дополнить, чтоб она и делала ещё этот спан видимым.
ага... если бы в теге span ещё было бы событие onchange(), на которое при изменении длины текста больше двух (как сказано в условии задачи) можно было бы повесить функцию... - было бы великолепно
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Авторазмер динамического iframe в зависимости от содержимого phenom jQuery 0 01.02.2011 18:29
изменение стиля для тега используя JS dimiork Элементы интерфейса 2 13.12.2010 10:47
Чтение содержимого тега script splashcoder Events/DOM/Window 8 28.11.2010 17:32
Как изменить размер <iframe> в зависимости от размера его содержимого Xslibris Events/DOM/Window 19 18.09.2010 14:52