Bug Tracker

Ticket #3575: index.html

File index.html, 5.6 KB (added by stasikom, December 03, 2008 03:44PM UTC)

test case

<!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>
<title>Progressive disclosure form</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />

<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("select").change(function(){
		$(this).parents("fieldset").next().show();
	});
	$("#reset").click(function(){
		$("fieldset:gt(0)").not(":last").hide();
	})
});
</script>
<style type="text/css">
body {
	font: normal 13px Helvetica;
}
legend {
	font-weight: bold;
	padding: 0 2em;
}
label {
	display: block;
	font-weight: bold;
}
fieldset {
	padding: 2em;
	-moz-border-radius: 1em;
	margin-bottom: 2em;
}
select,
fieldset.functions input,
pre {
	border: 1px solid #ccc;
	background: white;
	padding: .5em;
	-moz-border-radius: .5em;
	margin: 1em;
}
.notyet {
	display: none;
}
#content div {
	width: 45%;
	float: left;
	padding: 2.5%;
}
</style>
</head>

<body>
	<div id="container">
		<div id="head">
			<h1>Form with progressive disclosure using selects as triggers</h1>
		</div>
		<div id="content">
			<div>
				<h2>the functional test case:</h2>
				<form method="get" action="">
					<fieldset id="step1">
						<legend>step 1</legend>
						<p>I have to include a <em>meaningless dummy option</em> to make it possible for the select below to trigger the change handlers...</p>
						<p>Choose whatever option, now refresh the page, and suppose you'd still like to have that option selected and move on (you cannot do that right away because of the disclosure approach) - you first have to change it to something else, then back to the desired option.</p>
						<p>Ways to reproduce the problematic situation:</p>
						<ol>
							<li>Choose whatever option</li>
							<li>Refresh the page</li>
						</ol>
						<p>or...</p>
						<ol>
							<li>Choose whatever option</li>
							<li>Go to <a href="http://example.com">example.com</a>, then hit the browser's "back" button</li>
						</ol>
						<p>You'd have the same situation, if eg. you'd submit the form, let the server send the response, then hit the browsers "back" to correct something</p>
						<p>What I'd love to have, would be some custom event which would fire when selecting the already selected option in a HTML select element</p>
						<label for="select1">changing first select triggers disclosure</label>
						<select name="val1" id="select1">
							<option value="null">- choose something -</option>
							<option value="1">Only one value served by back-end!</option>
						</select>
					</fieldset>
					<fieldset id="step2" class="notyet">
						<legend>step 2</legend>
						<label for="select2">changing second select also does stuff</label>
						<select name="val1" id="select2">
							<option value="null">- choose something -</option>
							<option value="1">Lorem</option>
							<option value="2">Ipsum</option>
						</select>
					</fieldset>
					<fieldset id="step3" class="notyet">
						<legend>step 3</legend>
						<label for="select3">oh my, I think I got something wrong...</label>
						<select name="val1" id="select3">
							<option value="null">- choose something -</option>
							<option value="1">Lorem</option>
							<option value="2">Ipsum</option>
						</select>
					</fieldset>
					<fieldset class="functions">
						<input type="submit" id="submit" value="submit" />
						<input type="reset" id="reset" value="reset" />
					</fieldset>
				</form>
			</div>
			<div>
				<h2>the js:</h2>
				<pre>
$(function(){
	$("select").change(function(){
		$(this).parents("fieldset").next().show();
	});
	$("#reset").click(function(){
		$("fieldset:gt(0)").not(":last").hide();
	})
});
				</pre>
				<h2>the relevant HTML:</h2>
				<pre>
&lt;form method="get" action=""&gt;
	&lt;fieldset id="step1"&gt;
		&lt;legend&gt;step 1&lt;/legend&gt;
		&lt;label for="select1"&gt;changing first select triggers disclosure&lt;/label&gt;
		&lt;select name="val1" id="select1"&gt;
			&lt;option value="null"&gt;- choose something -&lt;/option&gt;
			&lt;option value="1"&gt;Only one value served by back-end!&lt;/option&gt;
		&lt;/select&gt;
	&lt;/fieldset&gt;
	&lt;fieldset id="step2" class="notyet"&gt;
		&lt;legend&gt;step 2&lt;/legend&gt;
		&lt;label for="select2"&gt;changing second select also does stuff&lt;/label&gt;
		&lt;select name="val1" id="select2"&gt;
			&lt;option value="null"&gt;- choose something -&lt;/option&gt;
			&lt;option value="1"&gt;Lorem&lt;/option&gt;
			&lt;option value="2"&gt;Ipsum&lt;/option&gt;
		&lt;/select&gt;
	&lt;/fieldset&gt;
	&lt;fieldset id="step3" class="notyet"&gt;
		&lt;legend&gt;step 3&lt;/legend&gt;
		&lt;label for="select3"&gt;oh my, I think I got something wrong...&lt;/label&gt;
		&lt;select name="val1" id="select3"&gt;
			&lt;option value="null"&gt;- choose something -&lt;/option&gt;
			&lt;option value="1"&gt;Lorem&lt;/option&gt;
			&lt;option value="2"&gt;Ipsum&lt;/option&gt;
		&lt;/select&gt;
	&lt;/fieldset&gt;
	&lt;fieldset class="functions"&gt;
		&lt;input type="submit" id="submit" value="submit" /&gt;
		&lt;input type="reset" id="reset" value="reset" /&gt;
	&lt;/fieldset&gt;
&lt;/form&gt;
				</pre>
			</div>
		</div>
		<div id="footer">
		</div>
	</div>
</body>

</html>

Download in other formats:

Original Format