Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скрытие формы (https://javascript.ru/forum/misc/6517-skrytie-formy.html)

artwalek 02.12.2009 15:45

Скрытие формы
 
Друзья, подскажите пожалуйста.

Мне нужно, когда при клике на <input type="Save" id="Save" name="submit" value="Сохранить" />, форма скрывалась (display: none).

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

Реализовать только через куку можно?

Спасибо.

Zend 02.12.2009 19:27

<a href="#" onclick="form_show()">Отобразить форму</a>


<form id="my_form" action="#" method="get">
<fieldset>
	<input type="text" name="t1" id="txt1"/>
	<input type="text" name="t1" id="txt2"/>
	<input type="button" value="Сохранить" onclick="form_close()"/>
	<input type="button" value="Сбросить" onclick="form_reset()"/>
</fieldset>
</form>

<style type="text/css">
	#my_form {
		display: none;
	}
</style>


// Функция получения ссылки на элемент по ID
function get(id) {
	return document.getElementById(id);
}

// Функция установки куков (обязательные параметры name, value)
function setCookie (name, value, expires, path, domain, secure) {
	document.cookie = name + "=" + escape(value) +
		((expires) ? "; expires=" + expires : "") +
		((path) ? "; path=" + path : "") +
		((domain) ? "; domain=" + domain : "") +
		((secure) ? "; secure" : "");
}

// Функция чтения значения куков
function getCookie(name) {
	var cookie = " " + document.cookie;
	var search = " " + name + "=";
	var setStr = null;
	var offset = 0;
	var end = 0;
	if (cookie.length > 0) {
		offset = cookie.indexOf(search);
		if (offset != -1) {
			offset += search.length;
			end = cookie.indexOf(";", offset)
			if (end == -1) {
				end = cookie.length;
			}
			setStr = unescape(cookie.substring(offset, end));
		}
	}
	return(setStr);
}

// Скрытия формы
function form_close() {
	setCookie("txt1", get("txt1").value);
	setCookie("txt2", get("txt2").value);
	get("my_form").style.display = "none";
}

// Функция отображения формы
function form_show() {
	if ( getCookie("txt1") != null && getCookie("txt1") != null ) {
		get("txt1").value = getCookie("txt1");
		get("txt2").value = getCookie("txt2");
	}
	
	get("my_form").style.display = "block";
}

// Функция удаления куков путём установки времени жизни на 1970 год
function form_reset() {
	setCookie("txt1", "", "Mon, 01-Jan-1970 00:00:00 GMT");
	setCookie("txt2", "", "Mon, 01-Jan-1970 00:00:01 GMT");
}


Я молодец. + не забываем.

artwalek 03.12.2009 09:25

Zend, благодарю.
Вечером погляжу.

Вам большое спасибо.

wiggum 31.01.2012 21:16

Отображение поля формы при выборе select
 
Подскажите как сделать, что бы поле для ввода текста появлялось при выборе из выпадающего списка "Другое..." и пропадало при выборе чего то другого?
<!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>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<style type="text/css">
.text-box {
    display: none;
}
</style>
<script type="text/javascript" >
(function($) {
    $(document).ready( function() {

        $('[name="toggle"]').bind('change', function() {
            $('.text-box').toggle( $(this).val() );
        });

    });
})(jQuery)
</script>
</head>

<body>
<form id="form" action="" method="post">
<select id="toggle_hide" type="select" name="toggle">  
  <option value="t1" id="toggle_hide" type="select" name="toggle" >Опция №1</option>  
  <option value="t2" for="toggle_hide" id="toggle_hide" type="select" name="toggle" >Опция №2</option>  
  <option value="t3" for="toggle_hide" id="toggle_hide" type="select" name="toggle" >Опция №3</option>  
  <option value="t4" id="toggle_show" name="toggle" >Другое...</option>  
  </select>

    <div class="text-box"><input type="text" name="text" value="Другое"></div>
</form>
</body>
</html>


Часовой пояс GMT +3, время: 08:37.