webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/FormUtils_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Testing QxFormUtils</p>
  16   </div>
  17
  18   <form id="mainform" style="position: absolute; left:300px; top: 48px">
  19     <fieldset>
  20       <legend>Basics</legend>
  21       <input type="text" name="givenname" value="Given Name"/>
  22       <br/>
  23       <input type="text" name="name" value="Name"/>
  24       <br/>
  25       <input type="password" name="password" value="Password"/>
  26     </fieldset>
  27     <br/>
  28     <input type="checkbox" checked="checked" name="human" id="human" value="true"/>
  29     <label for="human">Human</label>
  30     <br/>
  31     <input type="checkbox" name="old" id="old" value="true"/>
  32     <label for="old">Old</label>
  33     <br/>
  34     <input type="radio" name="gender" checked="checked" value="male" id="male"/>
  35     <label for="male">Male</label">
  36     <br/>
  37     <input type="radio" name="gender" value="female" id="female"/>
  38     <label for="female">Female</label">
  39     <br/>
  40     <label for="color">Favorite Color (Single)</label>
  41     <br/>
  42     <select name="color" id="color">
  43       <option value="red">Red</option>
  44       <option value="blue">Blue</option>
  45       <option value="green">Green</option>
  46       <option value="yellow">Yellow</option>
  47       <option value="black">Black</option>
  48       <option value="white">White</option>
  49     </select>
  50     <br/>
  51     <label for="pets">Your Pets (Multiple)</label>
  52     <br/>
  53     <select name="pets" id="pets" multiple="multiple" size="3">
  54       <option value="dog">Dog</option>
  55       <option value="cat">Cat</option>
  56       <option value="bird">Bird</option>
  57       <option value="rabbit">Rabbit</option>
  58       <option value="hamster">Hamster</option>
  59     </select>
  60     <br/>
  61     <input type="submit" value="Send Data"/>
  62   </form>
  63
  64   <script type="text/javascript">
  65   qx.core.Init.getInstance().defineMain(function()
  66   {
  67     var btn = new qx.ui.form.Button("Encode");
  68     btn.setLocation(20, 48);
  69     qx.ui.core.ClientDocument.getInstance().add(btn);
  70
  71     var area = new qx.ui.form.TextArea;
  72     area.setLocation(20, 100);
  73     area.setDimension(200, 100);
  74     qx.ui.core.ClientDocument.getInstance().add(area);
  75
  76     QxFormUtils.bind(document.getElementById("mainform"), function() {
  77       alert("Submitting Form Replacement...");
  78     });
  79
  80     btn.addEventListener("execute", function() {
  81       area.setValue(QxFormUtils.encodeForm(document.getElementById("mainform")));
  82     });
  83   });
  84   </script>
  85 </body>
  86 </html>