For nyligt har jeg haft behov for at vise en bekræftelses boks inden en web formular blev sendt. Frem for at bruge den kedelige javascript confirm box (onsubmit="return confirm('Vil du gå videre?');") på form tagget, har jeg lavet dette lille eksempel med JQuery og JQuery UI.
JQuery er et JavaScript bibliotek, der giver imponerende klientside programmerings muligheder med et hav af effekter. Der findes en masse JQuery plugins, der kan pifte et kedeligt site op.
JQuery kan hentes her og JQuery UI kan hentes her.

Følgende eksempel viser en 'confirm box' dannet vha. JQuery og ved klik på 'Accept' bliver web formularen submittet.

 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
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery UI Dialog </title>
		<link rel="stylesheet" href="/themes/base/jquery.ui.all.css">
		<script src="/jquery-1.6.2.js"></script>
		<script src="/external/jquery.bgiframe-2.1.2.js"></script>
		<script src="/ui/jquery.ui.core.js"></script>
		<script src="/ui/jquery.ui.widget.js"></script>
		<script src="/ui/jquery.ui.mouse.js"></script>
		<script src="/ui/jquery.ui.button.js"></script>
		<script src="/ui/jquery.ui.draggable.js"></script>
		<script src="/ui/jquery.ui.position.js"></script>
		<script src="/ui/jquery.ui.dialog.js"></script>
		<link rel="stylesheet" href="../demos.css">
		<script>
		$(function() {
			var minForm;
			$('#dialog-confirm').dialog({
				resizable: false,
				autoOpen: false,
				height:140,
				modal: true,
				buttons: {
					'Accept': function() {
						minForm.submit();
					},
					'Fortryd': function() {
						$(this).dialog('close');
					}
				}
			});
			$('#MinForm').submit(function(){
				minForm = this;
				$('#dialog-confirm').dialog('open');
				return false;
			});
		});
		</script>
	</head>
	<body>
		<form id="MinForm" name="MinForm" action="http://www.fasil.dk" method="post" target="_self">
			<div class="demo">
				<div id="dialog-confirm" title="Gå videre?">
					<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
					Er du sikker på dit valg?</p>
			</div>
			<input type="submit" name="mysumitbtn" id="mysumitbtn" value="send" />
		</form>
	</body>
</html>