|
|
|
| Мечтаю освоить форму ввода, которая подстраивается под вводимую информацию. Например, посетитель указывает пол - мужской или женский.
Если мужской, то вопрос: "Женат ли?"
Если ответ "ДА", то вопрос: "Имя вашей супруги".
Как обеспечить такой алгоритм вот в этом коде:
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Проба</title>
</head>
<body>
<form method=post>
<p>Пол</p>
<p><input type="Radio" value="m" name="sex">Мужской<br>
<input type="Radio" value="f" name="sex">Женский</p>
<p>Вы женаты?</p>
<p><input type="Radio" value="yes" name="mar">Да<br>
<input type="Radio" value="no" name="mar">Нет</p>
<p>Имя супруги </p>
<input type=text name=name>
<p> <input type=submit value="OK"></p>
</form>
</body>
</html>
|
| |
|
|
|
|
|
|
|
для: Владимир55
(24.06.2011 в 18:27)
| | Осуществляются такие штуки при активном участии JavaScrip. Вы хотите использовать чистый JavaScript или библиотеку jQuery, или вам все-равно? | |
|
|
|
|
|
|
|
для: cheops
(24.06.2011 в 18:39)
| | Вроде бы jQuery требует кодировки UTF-8, а сайт в 1251.
А вообще мне предпочтительней так, как понятней. В том смысле, чтобы этот пример я мог распространять на более сложные формы. | |
|
|
|
|
|
|
|
для: Владимир55
(24.06.2011 в 19:10)
| | >Вроде бы jQuery требует кодировки UTF-8, а сайт в 1251.
Вовсе нет, это скорее относится к AJAX (для IE 6 и не настроенных заголовков для Apache), а остальном кодировка не имеет значения.
PS Выложу свой вариант данной задачи с комментариями чуть позже (если никто не опередит). | |
|
|
|
|
|
|
|
для: Владимир55
(24.06.2011 в 18:27)
| | Можно начать отталкиваться от следующего скрипта
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
// Этот JS-код сработает только после полной
// загрузки документа
$(document).ready(function(){
// Радио-кнопкам с именем sex назначаем
// обработчик события click
$('input[name=sex]:radio').bind("click", function(){
// Получаем значение val() отмеченной checked радио-кнопки
if($('input[name=sex]:checked').val() == "m")
{
// Выбран мужской пол
$('#id_marry').html("Вы женаты?");
$('#id_name').html("Имя супруги");
}
else
{
// Выбран женский пол
$('#id_marry').html("Вы замужем?");
$('#id_name').html("Имя супруга");
}
});
});
</script>
<title>Проба</title>
</head>
<body>
<form method="post">
<p>Пол</p>
<p><input type="Radio" value="m" name="sex">Мужской<br>
<input type="Radio" value="f" name="sex">Женский</p>
<p id='id_marry'>Вы женаты?</p>
<p><input type="Radio" value="yes" name="mar">Да<br>
<input type="Radio" value="no" name="mar">Нет</p>
<p id='id_name'>Имя супруги</p>
<input type=text name=name>
<p> <input type=submit value="OK"></p>
</form>
</body>
</html>
| В HTML-код я был вынужден добавить идентификаторы для p-тэгов с фразами "Вы женаты?" и "Имя супруги", чтобы их можно было различать и обращаться к ним без многоэтажного определения их положения, относительно других элементов. | |
|
|
|
|
|
|
|
для: cheops
(24.06.2011 в 20:16)
| | Очень, очень интересно!
Спасибо! | |
|
|
|