git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/form/Form.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"\r
   2                 "http://www.w3.org/TR/html4/strict.dtd">\r
   3 <html>\r
   4 <head>\r
   5 \r
   6         <title>Form unit test</title>\r
   7         <style type="text/css">\r
   8                 @import "../../../dojo/resources/dojo.css";\r
   9                 @import "../css/dijitTests.css";\r
  10         </style>\r
  11         <script type="text/javascript" src="../../../dojo/dojo.js"\r
  12                 djConfig="isDebug: true, parseOnLoad: true"></script>\r
  13         <script type="text/javascript" src="../_testCommon.js"></script>\r
  14 \r
  15         <script type="text/javascript">\r
  16                 dojo.require("doh.runner");\r
  17                 dojo.require("dojo.date");\r
  18                 dojo.require("dijit.form.Form");\r
  19                 dojo.require("dijit.layout.LayoutContainer");\r
  20                 dojo.require("dijit.layout.ContentPane");\r
  21                 dojo.require("dijit.form.ComboBox");\r
  22                 dojo.require("dijit.form.CheckBox");\r
  23                 dojo.require("dijit.form.DateTextBox");\r
  24                 dojo.require("dijit.form.Button");\r
  25                 dojo.require("dijit.form.MultiSelect");\r
  26                 dojo.require("dijit.form.Textarea");\r
  27                 dojo.require("dijit.form.SimpleTextarea");\r
  28                 dojo.require("dijit.Editor");\r
  29 \r
  30                 var obj;\r
  31                 function getValues(){\r
  32                         obj = dijit.byId('myForm').getValues();\r
  33                         console.log("Object is: " + dojo.toJson(obj, true));\r
  34                 }\r
  35                 \r
  36                 function setValues(){\r
  37                         if(!obj){\r
  38                                 obj = {testF: 'testi'};\r
  39                         }\r
  40                         console.log("Object is: " + dojo.toJson(obj, true));\r
  41                         dijit.byId('myForm').setValues(obj);\r
  42                 }\r
  43 \r
  44                 // make dojo.toJson() print dates correctly (this feels a bit dirty)\r
  45                 Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};\r
  46 \r
  47                 var d = dojo.date.stamp.fromISOString;\r
  48 \r
  49                 // These are the values assigned to the widgets in the page's HTML\r
  50                 var original =  {\r
  51                                                         foo: {bar: {baz: {quux: d("2007-12-30")} } },\r
  52                                                         available: {from: d("2005-01-02"), to: d("2006-01-02")},\r
  53                                                         plop: {combo: "one"},\r
  54                                                         cb2: ["2", "3"],\r
  55                                                         r2: "2",\r
  56                                                         ms1: ["VA", "WA"],\r
  57                                                         h1: "hidden",\r
  58                                                         t1: "line 1\nline 2",\r
  59                                                         st1: "simple line 1\nsimple line 2",\r
  60                                                         richtext: "<h1>original</h1><p>This is the default content</p>",\r
  61                                                         filename: ""\r
  62                                                 };\r
  63 \r
  64                 // we change the form to these values\r
  65                 var changed =   {\r
  66                                                         foo: {bar: {baz: {quux: d("2005-01-01")} } },\r
  67                                                         available: {from: d("2005-11-02"), to: d("2006-11-02")},\r
  68                                                         plop: {combo: "three"},\r
  69                                                         cb2: ["4"],\r
  70                                                         r2: "1",\r
  71                                                         ms1: ["FL", "CA"],\r
  72                                                         h1: "still hidden",\r
  73                                                         t1: "new line 1\nnew line 2",\r
  74                                                         st1: "new simple line 1\nnew simple line 2",\r
  75                                                         richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>",\r
  76                                                         filename: ""\r
  77                                                 };\r
  78                 // we reset the form to these values\r
  79                 var reset =     {\r
  80                                                         foo: {bar: {baz: {quux: d("2007-12-30")} } },\r
  81                                                         available: {from: d("2005-01-02"), to: d("2006-01-02")},\r
  82                                                         plop: {combo: "one"},\r
  83                                                         cb2: ["2", "3"],\r
  84                                                         r2: "2",\r
  85                                                         ms1: ["VA", "WA"],\r
  86                                                         h1: "hidden",\r
  87                                                         t1: "line 1\nline 2",\r
  88                                                         st1: "simple line 1\nsimple line 2",\r
  89                                                         richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>", // not a form element, so not reset\r
  90                                                         filename: ""\r
  91                                                 };\r
  92 \r
  93                 dojo.addOnLoad(function(){\r
  94                         doh.register("dijit.form.Form",\r
  95                                 [\r
  96                                         function getValues(){\r
  97                                                 var values = dijit.byId("myForm").getValues();\r
  98                                                 \r
  99                                                 // FF3 sticks in some tabs and newlines that mess up the equality check\r
 100                                                 // Need better way to compare two HTML trees but for now do this.\r
 101                                                 values.richtext = values.richtext.replace(/[\n\t]/, "", "g");\r
 102 \r
 103                                                 doh.is( dojo.toJson(original), dojo.toJson(values) );\r
 104                                         },\r
 105                                         function setValues(){\r
 106                                                 dijit.byId("myForm").setValues(changed);\r
 107                                                 doh.is( dojo.toJson(changed), dojo.toJson(dijit.byId("myForm").getValues()) );\r
 108                                         },\r
 109                                         function nameAttributeSurvived(){  // ticket:4753\r
 110                                                 var radios = dojo.query(".RadioButton", dijit.byId("radio-cells")).forEach(\r
 111                                                         function(r) {\r
 112                                                                 doh.is( r.inputNode.name, "r2" );\r
 113                                                         });\r
 114                                                 \r
 115                                         },\r
 116                                         function resetTest(){\r
 117                                                 dijit.byId("myForm").reset();\r
 118                                                 doh.is( dojo.toJson(reset), dojo.toJson(dijit.byId("myForm").getValues()) );\r
 119                                         }\r
 120                                 ]\r
 121                         );\r
 122                         doh.run();\r
 123                 });\r
 124 \r
 125         </script>\r
 126 </head>\r
 127 <body>\r
 128         <h1>Form Widget Unit Test</h1>\r
 129         <p>\r
 130                 The form widget takes data in a form and serializes/deserializes it, so\r
 131                 it can be submitted as a JSON string of nested objects.\r
 132         </p>\r
 133         <div style="color:red">Currently only widgets are supported, not raw elements.</div>\r
 134         <!--    to test form submission, you'll need to create an action handler similar to\r
 135                         http://www.utexas.edu/teamweb/cgi-bin/generic.cgi \r
 136                 http://www.tipjar.com/cgi-bin/test -->\r
 137         <form dojoType="dijit.form.Form" id="myForm" \r
 138                 encType="multipart/form-data" action="" method="">\r
 139                 <script type="dojo/method" event="onReset">\r
 140                         return confirm('Press OK to reset widget values');\r
 141                 </script>\r
 142                 <script type="dojo/method" event="onSubmit">\r
 143                         console.debug('Attempting to submit form w/values:\n',\r
 144                                 dojo.toJson(this.getValues(),true)\r
 145                         );\r
 146                         if(this.validate()){\r
 147                                 return confirm('Form is valid, press OK to submit');\r
 148                         }else{\r
 149                                 alert('Form contains invalid data.  Please correct first');\r
 150                                 return false;\r
 151                         }\r
 152                         return true;\r
 153                 </script>\r
 154                 <script type="dojo/method" event="onReset">\r
 155                         return confirm('reset Form?');\r
 156                 </script>\r
 157                 <p>Just HTML text</p>\r
 158                 <table style="border: 1px solid #9f9f9f;" cellspacing="10">\r
 159                         <thead>\r
 160                                 <tr>\r
 161                                         <th>Description</th>\r
 162                                         <th>Name</th>\r
 163                                         <th>Form node/widget</th>\r
 164                                 </tr>\r
 165                         </thead>\r
 166                         <tbody>\r
 167                                 <!--\r
 168                                 <tr><td>text</td><td>testF</td><td><input type="text" name="testF" value="bar1" /></td></tr>\r
 169                                 <tr><td>password</td><td>passwordF</td><td><input type="password" name="passwordF" value="bar4" /></td></tr>\r
 170                                 <tr><td>hidden</td><td>hiddenF</td><td><input type="hidden" name="hiddenF" value="bar4" /></td></tr>\r
 171                                 <tr><td>select</td><td>plop.noncombo</td><td>\r
 172                                 <div class="group">\r
 173                                         <select name="plop.noncombo">\r
 174                                          <option value="1">one</option>\r
 175                                          <option value="2">two</option>\r
 176                                          <option value="3">three</option>\r
 177                                         </select>\r
 178                                 </div>\r
 179 \r
 180                                 </td></tr>\r
 181                                 -->\r
 182 \r
 183                                 <tr>\r
 184                                         <td>DateTextBox inside contentpane</td>\r
 185                                         <td>foo.bar.baz.quux</td>\r
 186                                         <td>\r
 187                                                 <div dojoType="dijit.layout.ContentPane">\r
 188                                                 <input type="text" name="foo.bar.baz.quux" dojoType="dijit.form.DateTextBox" value="2007-12-30" />\r
 189                                                 </div>\r
 190                                         </td>\r
 191                                 </tr>\r
 192                                 <tr>\r
 193                                         <td>Layoutcontainer</td>\r
 194                                         <td>\r
 195                                                 <div dojoType="dijit.layout.LayoutContainer"></div>\r
 196                                         </td>\r
 197                                 </tr>\r
 198                                 <tr>\r
 199                                         <td>DateTextBox 1</td>\r
 200                                         <td>available.from</td>\r
 201                                         <td>\r
 202                                                 <input type="text" name="available.from" dojoType="dijit.form.DateTextBox" value="2005-01-02" />\r
 203                                         </td>\r
 204                                 </tr>\r
 205                                 <tr>\r
 206                                         <td>DateTextBox 2</td>\r
 207                                         <td>available.to</td>\r
 208                                         <td>\r
 209                                                 <input type="text" name="available.to" dojoType="dijit.form.DateTextBox" value="2006-01-02" />\r
 210                                         </td>\r
 211                                 </tr>\r
 212                                 <tr>\r
 213                                         <td>ComboBox</td>\r
 214                                         <td>plop.combo</td>\r
 215                                         <td>\r
 216                                                 <select name="plop.combo" dojoType="dijit.form.ComboBox">\r
 217                                                         <option value="one">one</option>\r
 218                                                         <option value="two">two</option>\r
 219                                                         <option value="three">three</option>\r
 220                                                 </select>\r
 221                                         </td>\r
 222                                 </tr>\r
 223 \r
 224                                 <!--\r
 225                                 <tr>\r
 226                                         <td>textarea</td>\r
 227                                         <td>myTextArea</td>\r
 228                                         <td>\r
 229                                                 <textarea name="myTextArea">\r
 230                                                         text text text """ \\\/\r
 231                                                 </textarea>\r
 232                                         </td>\r
 233                                 </tr>\r
 234                                 -->\r
 235 \r
 236                                 <!--\r
 237                                 <tr>\r
 238                                         <td>CheckBox</td>\r
 239                                         <td>cb1</td>\r
 240                                         <td>\r
 241                                                 <input type="checkbox" name="cb1" value="1" /> 1\r
 242                                                 <input type="checkbox" name="cb1" value="2" checked="checked" /> 2\r
 243                                                 <input type="checkbox" name="cb1" value="3" checked="checked" /> 3\r
 244                                                 <input type="checkbox" name="cb1" value="4" /> 4\r
 245                                         </td>\r
 246                                 </tr>\r
 247                                 -->\r
 248 \r
 249                                 <tr>\r
 250                                         <td>CheckBox widget</td>\r
 251                                         <td>cb2</td>\r
 252                                         <td>\r
 253                                                 <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="1" /> 1\r
 254                                                 <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="2" checked="checked" /> 2\r
 255                                                 <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="3" checked="checked" /> 3\r
 256                                                 <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="4" /> 4\r
 257                                         </td>\r
 258                                 </tr>\r
 259 \r
 260                                 <!--\r
 261                                 <tr>\r
 262                                         <td>radio</td>\r
 263                                         <td>r1</td>\r
 264                                         <td>\r
 265                                                 <input type="radio" name="r1" value="1" /> 1\r
 266                                                 <input type="radio" name="r1" value="2" /> 2\r
 267                                                 <input type="radio" name="r1" value="3" /> 3\r
 268                                                 <input type="radio" name="r1" value="4" /> 4\r
 269                                         </td>\r
 270                                 </tr>\r
 271                                 -->\r
 272 \r
 273                                 <tr>\r
 274                                 <td>Radio widget</td><td>r2</td>\r
 275                                 <td id="radio-cells">\r
 276                                 <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="1" /> 1\r
 277                                 <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="2" checked="checked" /> 2\r
 278                                 <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="3"/> 3\r
 279                                 <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="4" /> 4\r
 280                                 </td>\r
 281                                 </tr>\r
 282 \r
 283                                 <tr>\r
 284                                         <td>Multi-select</td><td>ms1</td>\r
 285                                         <td>\r
 286                                                 <select id="ms1" multiple="true" name="ms1"\r
 287                                                         dojoType="dijit.form.MultiSelect"\r
 288                                                         style="height:100px; width:175px; border:5px solid #ededed;">\r
 289 \r
 290                                                         <option value="TN">Tennessee</option>\r
 291                                                         <option value="VA" selected="true">Virginia</option>\r
 292                                                         <option value="WA" selected="true">Washington</option>\r
 293                                                         <option value="FL">Florida</option>\r
 294                                                         <option value="CA">California</option>\r
 295 \r
 296                                                 </select>\r
 297                                         </td>\r
 298                                 </tr>\r
 299 \r
 300                                 <tr>\r
 301                                         <td>Hidden input</td>\r
 302                                         <td>h1</td>\r
 303                                         <td>\r
 304                                                 <input id="h1" name="h1" dojoType="dijit.form.TextBox" type="hidden" value="hidden">\r
 305                                         </td>\r
 306                                 </tr>\r
 307 \r
 308                                 <tr>\r
 309                                         <td>Auto-sizing textarea</td>\r
 310                                         <td>t1</td>\r
 311                                         <td>\r
 312                                                 <textarea id="t1" name="t1" \r
 313         dojoType="dijit.form.Textarea">line 1\r
 314 line 2</textarea>\r
 315                                         </td>\r
 316                                 </tr>\r
 317 \r
 318                                 <tr>\r
 319                                         <td>Fixed size textarea</td>\r
 320                                         <td>st1</td>\r
 321                                         <td>\r
 322                                                 <textarea id="st1" name="st1" dojoType="dijit.form.SimpleTextarea" rows=5 cols=50>\r
 323 simple line 1\r
 324 simple line 2</textarea>\r
 325                                         </td>\r
 326                                 </tr>\r
 327 \r
 328                                 <tr>\r
 329                                         <td>Editor widget</td>\r
 330                                         <td>richtext</td>\r
 331                                         <td>\r
 332                                                 <textarea dojoType="dijit.Editor" name="richtext" pluginsConfig="[{items:['bold','italic']}]"><h1>original</h1><p>This is the default content</p></textarea>\r
 333                                         </td>\r
 334                                 </tr>\r
 335 \r
 336                                 <tr>\r
 337                                         <td>File upload</td>\r
 338                                         <td>filename</td>\r
 339                                         <td>\r
 340                                                 <input dojoType="dijit.form.TextBox" name="filename" type="file">\r
 341                                         </td>\r
 342                                 </tr>\r
 343                         </tbody>\r
 344                 </table>\r
 345 \r
 346                 <button dojoType=dijit.form.Button onClick="getValues();">Get Values from form!</button>\r
 347                 <button dojoType=dijit.form.Button onClick="setValues();">Set Values to form!</button>\r
 348                 <button dojoType=dijit.form.Button type="submit">Submit</button>\r
 349                 <button dojoType=dijit.form.Button type="reset">Reset</button>\r
 350         </form>\r
 351 \r
 352 \r
 353 </body>\r
 354 </html>\r