Skip to main content

Bug Tracker

Side navigation

Ticket #2551: index.html


File index.html, 2.1 KB (added by tinyfly, December 08, 2009 07:49PM UTC)

Test case alerting the values returned from both jQuery and DOM methods

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Reset form selected option test</title>
	<!-- Date: 2009-12-08 -->
	<!--<script src="jquery-1.4a1.js" type="text/javascript" charset="utf-8"></script>-->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
	<script type="text/javascript" charset="utf-8">
		var select_test = {
			using_jq: function () {
				var website_id, user_type, txt;

				website_id = $('#website').val();
				user_type = $('#user-type').val();

				txt = '';
				txt = 'Using jQuery:\n';
				txt += 'Website = ' + website_id + '\n';
				txt += 'User Type = ' + user_type;

				alert(txt);
			},
			using_dom: function () {
				var website, website_id, user, user_type, txt;

				website = document.getElementById('website');
				user = document.getElementById('user-type');

				website_id = website.options[website.selectedIndex].value;
				user_type = user.options[user.selectedIndex].value;

				txt = '';
				txt = 'Using Straight DOM:\n';
				txt += 'Website = ' + website_id + '\n';
				txt += 'User Type = ' + user_type + '\n';
				txt += 'User selectedIndex = ' + user.selectedIndex + '\n';
				txt += 'User selected = ' + user.options[user.selectedIndex].selected + '\n';

				alert(txt);
			}
		};

		$(document).ready(function () {
			$('#btn_filter').click(function(event) {
				event.preventDefault();
				select_test.using_jq();
				select_test.using_dom();
			});
		});
	</script>
</head>

<body>
<form action="index_submit" method="get">
	<p>
		<label for="website">Website</label>
		<select id="website">
			<option value="3">Site.com</option>
		</select>
	</p>

	<p>
		<label for="user-type">User Type</label>
		<select id="user-type" name="user-type">
			<option value="All">All</option>
			<option value="External">External</option>
			<option value="Internal">Internal</option>
		</select>
	</p>

	<p>
		<input type="reset" value="Reset Form">
		<input type="submit" id="btn_filter" value="Refresh Results">
	</p>
</form>

</body>
</html>

Download in other formats:

Original Format