Скрытие html-формы с помощью javascripts
Пользователи, просматривающие топик: none
|
Зашли как: Guest
|
Имя  |
| Сообщение |
<< Старые топики Новые топики >> |
|
|
Скрытие html-формы с помощью javascripts - 2007-03-01 18:59:04.083333
|
|
|
sankey
Сообщений: 1
Оценки: 0
Присоединился: 2007-03-01 18:52:12.300000
|
И так…
Есть две html-формы <select>: form1, form2..
Задача в том чтобы form2 появлялась только после выбора определенного значения в form1. То есть если мы вибираем одно (правельное значение) form2 появлялась ниже, если дгугое значение в первой форме то form2 не появляется…
На сколько я понимаю реализовать это можно на javascripts, но моих знаний для этого не достаточно…
заранее благодарен…
|
|
|
|
|
RE: Скрытие html-формы с помощью javascripts - 2007-03-01 21:54:40.776666
|
|
|
voody
Сообщений: 958
Оценки: 0
Присоединился: 2005-02-06 22:28:30
|
Что значит quote:
только после выбора определенного значения в form1 ? form1 - это название какой-то формы, а какой элемент управления нужно проверять? Пиши подробнее. На данный момент могу сказать (напишешь подробнее - скажу подробнее), что с помощью CSS у любого элемента формы можно устанавливать свойства visibility (видимость) и display (отображение). Если использовать эти свойства для сокрытия элементов страницы - то это почти одно и то же, но первое свойство определяет видимость объекта, а второе его отображение впринципе. Т.е., в первом случае можно сделать объект невидимым, а во-втором вообще не отображающимся (даже не занимающим место на странице). Цитирую (из справочника по CSS):
quote:
'visibility'
Значение: visible | hidden | collapse | inherit
Начальное значение: inherit
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования
Свойство 'visibility' определяет, будет ли осуществляться отображение блоков, порождаемых элементом, или нет. Невидимые блоки по-прежнему влияют на отображение (для запрета генерации блоков свойству 'display' необходимо присвоить значение 'none'). Значения данного свойства имеют следующий смысл:
visible
Генерируемый блок является видимым.
hidden
Генерируемый блок является невидимым (полностью прозрачным), но по-прежнему влияет на отображение.
collapse
Обратитесь к разделу, посвященному динамическим преобразованиям строк и столбцов таблиц. Если это значение используются с элементами, отличными от строк или столбцов, то его действие аналогично действию значения 'hidden'.
Данное свойство можно использовать в сочетании со сценариями для создания динамических эффектов.
'display'
Значение: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | наследуемое
Начальное значение: строковое
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Устройства: все
Значения этого свойства:
block
При этом значении свойства элемент порождает главный структурный блок.
inline
При этом значении свойства элемент порождает один или несколько строковых блоков.
list-item
При этом значении свойства элемент (например, LI в HTML) порождает главный структурный блок и строковый блок элемента списка. Информацию о списках и примерах форматирования списков можно найти в разделе о списках.
marker
При этом значении свойства генерируемое содержимое, располагающееся до или после блока, становится маркером. Данное значение должно использоваться только с псевдоэлементами :before и :after, прикрепленным к элементам структурного уровня. В остальных случаях данное значение интерпретируется как 'inline'. Дополнительную информацию можно найти в разделе о маркерах.
none
При этом значении свойства элемент не порождает ни одного блока в структуре форматирования (т.е. элемент никак не влияет на отображение документа). Потомки этого элемента тем более не будут порождать никаких блоков, даже если для их свойства 'display' установлено другое значение.
Обратите внимание, что в результате использования значения 'none' не создается вообще никакого блока, в том числе и невидимого. В CSS имеются такие механизмы, которые позволяют элементам порождать в структуре форматирования определенные блоки, влияющие на форматирование, но при этом явно не отображаемые. Подробную информацию можно найти в разделе о видимости.
run-in и compact
Эти значения свойства в зависимости от контекста создают структурный или строковый блок. Применение свойства к инициальному или компактному блоку осуществляется, исходя из его окончательного статуса (является ли он строковым или структурным блоком). Например, свойство 'white-space' применимо, только если блок становится структурным.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption
При этих значениях свойства элемент ведет себя как элемент таблицы (ограничения рассматриваются в главе о таблицах).
Необходимо помнить, что хотя в качестве начального значения свойства 'display' используется значение 'inline', правила, содержащиеся в таблице стилей, используемой агентом пользователя по умолчанию, могут переназначить его. Подробную информацию можно найти в приложении при рассмотрении примера таблицы стилей для HTML 4.0.
Разумеется, этими свойствами можно управлять динамически, из JavaScript'а. Например:
<html><head></head><body>
<form name="form1" style="visibility:hidden"> <input type="button" value=" Hi! "> </form><br>
<input type="button" value="Показать форму" onclick="JavaScript:document.form1.style.visibility='visible'">
</body></html>
Если хочешь получить более подробный ответ - описывай подробнее проблему (модешь код страницы показать).
|
|
|
|
|
RE: Скрытие html-формы с помощью javascripts - 2007-03-01 22:41:14.920000
|
|
|
tkvit
Сообщений: 50
Оценки: 0
Присоединился: 2007-01-07 17:48:20.876666
|
По крайней мере есть 2 способа, первый создать 2 формы и у второй сделать display:none, а при изменении значения первой формы проверять если оно равно чему надо то менять на display:block так как заморачиваться ты походу не особо хочешь то вот решение
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function show(obj){
if(document.getElementById("sel1").value==2)
document.getElementById("sel2").style.display='block';
else
document.getElementById("sel2").style.display='none';
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select name="select" id="sel1" onchange="show(this);">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
</select>
<br>
<select name="select" id="sel2" style="display:none">
<option id="1">1 </option>
<option id="2">2 </option>
<option id="3">3 </option>
</select>
</form>
</body>
</html>
а второй заключается в том чтобы сгенерить вторую форму
лови
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function show(obj){
if(obj.value==2){
var par=obj.parentNode;
var new_tab=obj.cloneNode(true);
par.appendChild(new_tab);
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" id="form1" action="">
<select name="select" id="sel1" onchange="show(this);">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
</select>
</form>
</body>
</html>
вот собстно и вся петрушка
|
|
|
|
|
|
