aboutsummaryrefslogtreecommitdiffstats
path: root/demos/dialog/modal-form2.html
blob: 509150858118c6f2e4d65297e01dd46c3bfebf17 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Dialog - Modal form</title>
	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.3.1.js"></script>
	<script type="text/javascript" src="../../ui/ui.core.js"></script>
	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
	<script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<style type="text/css">
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; }
		fieldset { padding:0; border:0; margin-top:25px; }
	</style>
	<script type="text/javascript">
	$(function() {
		var name = $('#name'),
			email = $('#email'),
			password = $('#password'),
			allFields = $([]).add(name).add(email).add(password);
		
		$("#dialog").dialog({
			autoOpen: false,
			bgiframe: true,
			height: 300,
			modal: true,
			buttons: {
				'Create user account': function() {
					var bValid = true;
					allFields
						.removeClass('ui-state-error')
						.each(function() {
							if (!$(this).val().length) {
								$(this).addClass('ui-state-error');
								bValid = false;
							}
						});
					
					if (bValid) {
						$('#users tbody').append('<tr>' +
							'<td>' + name.val() + '</td>' + 
							'<td>' + email.val() + '</td>' + 
							'<td>' + password.val() + '</td>' +
							'</tr>'); 
						$(this).dialog('close');
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('');
			}
		});
		
		$('#create-user').click(function() {
			$('#dialog').dialog('open');
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="dialog" title="Create new user">
	<p>All form fields are required.</p>

	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text" />
	</fieldset>
	</form>
</div>

<a id="create-user" href="#">create new user</a>

<table id="users">
	<thead>
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Password</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>John Doe</td>
			<td>john.doe@example.com</td>
			<td>johndoe1</td>
		</tr>
	</tbody>
</table>

</div><!-- End demo -->

<div class="demo-description">

<p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>

</div><!-- End demo-description -->

</body>
</html>