blob: 2e7638d8f8560d55e44f76b38d4aa12c7ee94ba1 (
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
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qooxdoo » Demo</title>
<link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
<![endif]-->
<script type="text/javascript" src="../../script/qx.js"></script>
</head>
<body>
<script type="text/javascript" src="../../script/layout.js"></script>
<div id="demoDescription">
<p>Testing QxFormUtils</p>
</div>
<form id="mainform" style="position: absolute; left:300px; top: 48px">
<fieldset>
<legend>Basics</legend>
<input type="text" name="givenname" value="Given Name"/>
<br/>
<input type="text" name="name" value="Name"/>
<br/>
<input type="password" name="password" value="Password"/>
</fieldset>
<br/>
<input type="checkbox" checked="checked" name="human" id="human" value="true"/>
<label for="human">Human</label>
<br/>
<input type="checkbox" name="old" id="old" value="true"/>
<label for="old">Old</label>
<br/>
<input type="radio" name="gender" checked="checked" value="male" id="male"/>
<label for="male">Male</label">
<br/>
<input type="radio" name="gender" value="female" id="female"/>
<label for="female">Female</label">
<br/>
<label for="color">Favorite Color (Single)</label>
<br/>
<select name="color" id="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>
<br/>
<label for="pets">Your Pets (Multiple)</label>
<br/>
<select name="pets" id="pets" multiple="multiple" size="3">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="bird">Bird</option>
<option value="rabbit">Rabbit</option>
<option value="hamster">Hamster</option>
</select>
<br/>
<input type="submit" value="Send Data"/>
</form>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var btn = new qx.ui.form.Button("Encode");
btn.setLocation(20, 48);
qx.ui.core.ClientDocument.getInstance().add(btn);
var area = new qx.ui.form.TextArea;
area.setLocation(20, 100);
area.setDimension(200, 100);
qx.ui.core.ClientDocument.getInstance().add(area);
QxFormUtils.bind(document.getElementById("mainform"), function() {
alert("Submitting Form Replacement...");
});
btn.addEventListener("execute", function() {
area.setValue(QxFormUtils.encodeForm(document.getElementById("mainform")));
});
});
</script>
</body>
</html>
|
