summaryrefslogtreecommitdiff
path: root/swat/apps/qooxdoo-examples/test/FormUtils_1.html
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 &raquo; 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>