Не работает форма в с полями в скрытом div

NewS · 4 Июл 2011

Есть форма:

HTML:

<form name='..' id='..' enctype='multipart/form-data' method='post' action='..'>
<input name='..' type='hidden' value='..' />
<input name='..' type='hidden' value='..' />
<input type='text' name='..' value='..'>
<input type='text' name='..' value='..'>
<a href='#' onclick='..'>Открыть скрытый див</a>
<div class='hidden-content'>
<input type='text' name='..' value='..'>
<input type='text' name='..' value='..'>
</div>
<input type='submit' value='Сохранить' />
</form>

Открываю скрытый див в всплывающем окне с помощью Highslide JS, вношу текст в поля, и закрываю всплывающее окно.
Далее отправляю форму. Но текст не сохраняется (или не передается в форму).

Если же вынести эти поля из скрытого див'а, то всё отлично работает.

В чем может быть причина? Это в принципе не должно работать или какой-то глюк Highslide JS?

bork75 · 4 Июл 2011

Если, всплывающее окно представляет собой новое окно браузера, а я подозреваю, что это так, то это тоже самое, что вырвать кусок из кода и разместить его на другой странице, которые конечно не будут взаимодействовать.

Лучше так:

PHP:

<!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=utf-8" />
<title>Без названия 1</title>
</head>

<body>

<script type="text/javascript">
<!--
function Spoiler(obj) {

var name1 = obj.parentNode.getElementsByTagName("div")[0];
if (name1.style.display == "none") name1.style.display = ""; 
else name1.style.display = "none"; 

var name1 = obj.parentNode.getElementsByTagName("a")[0];
if (name1.innerText == "Показать") name1.innerText = "Скрыть";
else name1.innerText = "Показать";

if (name1.className == "spoil") name1.className = "spoil-open";
else name1.className = "spoil";

} 
//-->
</script>



<form name='..' id='..' enctype='multipart/form-data' method='post' action='..'>
<input name='..' type='hidden' value='..' />
<input name='..' type='hidden' value='..' />
<input type='text' name='..' value='..' />
<input type='text' name='..' value='..'>
<!--  -->	
<span class="spoiler">
<a id="name1" href="javascript:void(0)" class="spoil" onclick="Spoiler(this);">Показать</a> <br />
<div id="text" style="display:none;">
	
	<div class='hidden-content'>
	<input type='text' name='..' value='..' />
	<input type='text' name='..' value='..' />
	</div>

</div></span>				
<!-- /-->

<input type='submit' value='Сохранить' />
</form>
</body>

</html>

Это скрытое поле можно сделать плавающее:

PHP:

<!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=utf-8" />
<title>Без названия 1</title>
</head>

<body>

<script type="text/javascript">
<!--
function Spoiler(obj) {

var name1 = obj.parentNode.getElementsByTagName("div")[0];
if (name1.style.display == "none") name1.style.display = ""; 
else name1.style.display = "none"; 

var name1 = obj.parentNode.getElementsByTagName("a")[0];
if (name1.innerText == "Показать") name1.innerText = "Скрыть";
else name1.innerText = "Показать";

if (name1.className == "spoil") name1.className = "spoil-open";
else name1.className = "spoil";

} 
//-->
</script>



<form name='..' id='..' enctype='multipart/form-data' method='post' action='..'>
<input name='..' type='hidden' value='..' />
<input name='..' type='hidden' value='..' />
<input type='text' name='..' value='..' />
<input type='text' name='..' value='..'>
<!--  -->	
<span class="spoiler">
<a id="name1" href="javascript:void(0)" class="spoil" onclick="Spoiler(this);">Показать</a> <br />
<div id="text" style="display:none;">
	
	<div class='hidden-content' style="background:  #FFFF66; padding:20px; position:absolute; top:30%; left:45%;">
	<input type='text' name='..' value='..' />
	<input type='text' name='..' value='..' />
	</div>

</div></span>				
<!-- /-->

<input type='submit' value='Сохранить' />
</form>
</body>

</html>

Darkmind · 4 Июл 2011

NewS написал(а):
<...>
В чем может быть причина?

В непонимании DOM и xHTML вообще.
Подключаем логику: открывается див, вписывается значение в форму, закрывается див. Какие основания предполагать, что форма должна сохранять в себе только что вписанное значение?

Адский костыль:

PHP:

<div>
	<form name='f1' id='f1' enctype='multipart/form-data' method='post'>
		<input type="hidden" name='mirror_h1' id='mirror_h1' value='' />
		<a href="index.htm" onclick="return hs.htmlExpand(this)">Open</a>
		<div class="highslide-maincontent">
			<input type='text' name='h1' value='h1' onkeyup="document.getElementById('mirror_h1').value=this.value">
		</div>
		<br />
		<input type='submit' value='Сохранить' />
	</form>
</div>

Т.е. при onkeyup, содержимое input поля во всплывающем диве транслируется на новое hidden поле (в нашем случае mirror_h1) в форме.
Если использовать jQuery, то можно использовать метод live().

Но советую придумать более валидную идею. Если форма требует такого обращения - это не шибко хорошая форма.

NewS · 4 Июл 2011

bork75, спасибо, но такой вариант не для меня )

Похоже, что Highslide создает как бы отдельную страницу, и на неё отображает инфу. Так как формы полность выводимые в всплывающем окне работают. А тут, действительно, как выдранный кусок кода получается. Жаль конечно, что в Highslide нет возможности открыть часть формы, заполнить её, закрыть окно, и продолжать заполнять остальное.
Решил вообще отказаться скрывать часть формы. Просто хотелось сделать страницу более компактной. :confused:

Добавлено через 6 минут
Darkmind, вот такая мысль уже проскакивала в моей голове. Продублировать поля и из них уже передавать основным полям. Хорошо, если это сработает. Надо будет попробовать.

Добавлено через 32 минуты
Darkmind, попробовал... не хочет onkeyup ничего передавать нужному id.

Darkmind · 4 Июл 2011

NewS написал(а):
Darkmind, вот такая мысль уже проскакивала в моей голове. Продублировать поля и из них уже передавать основным полям. Хорошо, если это сработает. Надо будет попробовать.
Добавлено через 32 минуты
Darkmind, попробовал... не хочет onkeyup ничего передавать нужному id.

Показывайте код. Мой пример работает, я проверял перед тем как постить. JQuery подключен?

И если несложно, пожалуйста, сохраняйте названия полей и ID'шники, а то потом многоточия заменять - время теряется.

NewS · 5 Июл 2011

Подключен jquery-1.4.4.min.js, но я в нем не разбираюсь. :confused:

Вот код:

HTML:

<form name='Form' id='Form' enctype='multipart/form-data' method='post' action='add.php'>
<input type='hidden' name='Foto1' id='Foto1' />
<input type='hidden' name='Foto2' id='Foto2' />
<input type='hidden' name='Foto3' id='Foto3' />
<a href='#' onclick='return hs.htmlExpand(this)'>Открыть</a>
<div class='highslide-maincontent'>
<input type='file' onkeyup="document.getElementById('Foto1').value=this.value" />
<input type='file' onkeyup="document.getElementById('Foto2').value=this.value" />
<input type='file' onkeyup="document.getElementById('Foto3').value=this.value" />
</div>
</form>

Добавлено через 21 минуту
Я пробовал с полями типа file. Сейчас попробовал с полями типа text - получилось!
А как же быть с полями типа file? Я тут вычитал, что у type='file' нет атрибута value.

Darkmind · 5 Июл 2011

NewS написал(а):
Подключен jquery-1.4.4.min.js, но я в нем не разбираюсь.

Для type=file не срабатывает onkeyup. Вешать надо не на onkeyup а на onchange. И тогда еще будут проблемы с IE, потому что он не реагирует на change для поля input=file из-за хитрожопой работы с диалоговым окном.

Решение на JS:

PHP:

<script type="text/javascript">
$(document).ready(function() {

	var $input  = $('#f1'); // Откуда копировать
	var $target = $('#h1'); // Куда копировать

	// Непосредственно функция копирования
	var crutch = function() {
		$target.val( $input.val() );
	};

	// Костыль для IE
	if ($.browser.msie) {
		$input.click(function(event) {
			// IE подавляет эвент, пока не будет закрыт диалог
			setTimeout(function() {
				crutch();
			}, 0);
		});
	}

	// Для православных браузеров работает change()
	else {
		$input.change(crutch);
	}
});
</script>

Полный проверенный файл со включенной отладкой выглядит так:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

А теперь внимание, вопрос: "Зачем такие костыли?". Не факт, что это решение будет безглючно работать во всех ситуациях. Зачем так извращаться? Лучше подумайте над дизайном и вёрсткой.

NewS · 5 Июл 2011

Darkmind, учитывая что у меня таких полей 7 штук, и я так понимаю, что для каждого нужно этот костыль прописывать, то я все же откажусь от этой идеи. Но за предложенное решение спасибо!
Скрою лучше поля типа "текст"

с ними же проблем, при использовании onkeyup, в разных браузерах не будет?

И еще вопросик по поводу Highslide JS:
При использовании objectType:'ajax', Опера отдает страницу с кирилическими ссылками, а IE не хочет:

You don't have permission to access /ñîãëàøåíèå/ on this server.

Можно как-то это починить?

Darkmind · 6 Июл 2011

NewS написал(а):
Darkmind, учитывая что у меня таких полей 7 штук, и я так понимаю, что для каждого нужно этот костыль прописывать, то я все же откажусь от этой идеи. Но за предложенное решение спасибо!

В качестве селектора у jQuery можно использовать выражения:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Но в любом случае, как я уже говорил, это установка костылей. У формы проблемы с юзабилити и интерфейсом, если требуются такие механики.

NewS написал(а):
Скрою лучше поля типа "текст" с ними же проблем, при использовании onkeyup, в разных браузерах не будет?

Ну как сказать. Сам эвент onkeyup срабатывает во всех приличных браузерах. Но если юзер вздумает вставить текст из буфера обмена мышкой или через меню - поле не протранслируется. Потому что onkeyup срабатывает на отпускание кнопки на клавиатуре, а мышь - это уже onclick, onmousemove, onmouseout и так далее. Забегая вперёд, скажу что есть onpaste, но этот эвент не везде работает.

NewS написал(а):
При использовании objectType:'ajax', Опера отдает страницу с кирилическими ссылками, а IE не хочет:

Кириллические ссылки - зло, корнями уходящее в различные кодировки. Если в URI надо засунуть кириллицу - делайте ей urlencode().

ñîãëàøåíèå
соглашение
urlencode() -> %F1%EE%E3%EB%E0%F8%E5%ED%E8%E5

NewS · 7 Июл 2011

Darkmind написал(а):
Если в URI надо засунуть кириллицу - делайте ей urlencode().

Почитал про эту функцию, покрутил, но результата не получил...
Вот код ссылки:

HTML:

<a href='/соглашение/' class='highslide' onclick='return hs.htmlExpand(this)'>соглашение</a>

Как на этом примере реализовать функцию urlencode()?
Хочу заметить, что весь сайт и БД в UTF-8. И если Опера отдает страницы, значит проблема в Осле?

Не работает форма в с полями в скрытом div

NewS

Гуру форума

bork75

The Team

Darkmind

SNMP maniac

NewS

Гуру форума

Darkmind

SNMP maniac

NewS

Гуру форума

Darkmind

SNMP maniac

NewS

Гуру форума

Darkmind

SNMP maniac

NewS

Гуру форума