<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Test dojo.io.bind()</title> <style> .value { background-color: #FFFFC0; } .hilite { background-color: #FFC0C0; } </style> <script language="JavaScript" type="text/javascript"> // Dojo configuration djConfig = { isDebug: true }; </script> <script language="JavaScript" type="text/javascript" src="../../dojo.js"></script> <script language="JavaScript" type="text/javascript"> dojo.require("dojo.io.*"); dojo.require("dojo.io.IframeIO"); dojo.require("dojo.event.*"); methodWatcher = function(){ var m = dojo.byId("method"); var f = dojo.byId("form"); switch(m.value){ case "post": f.method = "post"; if(f.encoding){ f.encoding = "application/x-www-form-urlencoded"; }else{ f.enctype = "application/x-www-form-urlencoded"; } break; case "postx": f.method = "post"; if(f.encoding){ f.encoding = "multipart/form-data"; }else{ f.enctype = "multipart/form-data"; } break; default: // get f.method = "get"; break; } } var useDojo = false; transportWatching = function(){ var t = dojo.byId("transport"); switch(t.value){ case "dojo": useDojo = true; break; default: useDojo = false; break; } } submitForm = function(e){ if(!useDojo){ return; } e.preventDefault(); var meth = "GET"; var part = false; var m = dojo.byId("method"); switch(m.value){ case "post": meth = "POST"; break; case "postx": meth = "POST"; part = true; break; } var kw = { url: "reflector.cgi", content: { inline: "yes" }, formNode: dojo.byId("form"), load: function(type, data) { dojo.byId("result").innerHTML = data; }, error: function(type, error) { alert(String(type) + "\n" + String(error)); }, method: meth, multipart: part }; if(part){ kw.file = [ { name: "file1", fileName: "file1.txt", content: dojo.byId("sim1").innerText }, { name: "file2", content: dojo.byId("sim2").innerText, contentType: "text/plain" } ]; } dojo.io.bind(kw); } dojo.addOnLoad(function() { methodWatcher(); dojo.event.connect(dojo.byId("method"), "onchange", "methodWatcher"); transportWatching(); dojo.event.connect(dojo.byId("transport"), "onchange", "transportWatching"); dojo.event.connect(dojo.byId("form"), "onsubmit", "submitForm"); }); </script> </head> <body> <h1>Test dojo.io.bind()</h1> <p>This page tests different post methods of <tt>dojo.io.bind()</tt> and compare them with conventional form submitting.</p> <h2>Select method and transport</h2> <fieldset><table><tbody> <tr><td>Method:</td><td><select id="method" NAME="method"> <option value="get">GET</option> <option value="post">POST</option> <option value="postx">POST; multipart/form-data</option> </select></td></tr> <tr><td>Transport:</td><td><select id="transport" NAME="method"> <option value="int">Browser</option> <option value="dojo">Dojo</option> </select></td></tr> </tbody></table></fieldset> <h2>Submit a form</h2> <p>If you submit this form using Dojo, you can see results below. Otherwise you will be redirected to results screen.</p> <fieldset> <form id="form" action="reflector.cgi"> <table><tbody> <tr><td><label for="text">text:</label></td><td><input type="text" id="text" name="text" /></td></tr> <tr><td><label for="password">password:</label></td><td><input type="password" id="password" name="password" /></td></tr> <tr><td>radio:</td> <td> <input type="radio" id="radio1" name="radio" value="radio1" checked /><label for="radio1">radio1</label> <input type="radio" id="radio2" name="radio" value="radio2" /><label for="radio2">radio2</label> </td> </tr> <tr><td>checkbox:</td> <td> <input type="checkbox" id="check" name="check" value="check" /><label for="check">check</label> </td> </tr> <tr><td><label for="select">select:</label></td> <td><select id="select" name="select"> <option value="select1" selected>select1</option> <option value="select2">select2</option> </select></td> </tr> <tr><td><label for="textarea">textarea:</label></td><td><textarea id="textarea" name="textarea"></textarea></td></tr> <!--<tr><td><label for="file">file:</label></td><td><input type="file" id="file" name="file" /></td></tr>--> </tbody></table> <p><input type="hidden" id="hidden" name="hidden" value="nidden" /> <input type="submit" value="Submit" id="submit" name="submit"/> <input type="reset" value="Reset" id="reset" name="reset" /></p> </form> <p>Following simulated files will be submitted only by Dojo transport.<br/> File #1 is submitted with following parameters: <tt>name="file1" fileName="file1.txt"</tt>.<br/> File #2 is submitted with following parameters: <tt>name="file2" contentType="text/plain"</tt>.</p> <p><label for="sim1">Simulated file #1:</label><br/><textarea id="sim1" name="sim1"></textarea></p> <p><label for="sim2">Simulated file #2:</label><br/><textarea id="sim2" name="sim2"></textarea></p> </fieldset> <h2>Traditional file submit form</h2> <p>This is a static form with <tt>method="post" enctype="multipart/form-data"</tt> options.</p> <fieldset><form action="reflector.cgi" method="post" enctype="multipart/form-data"> <p> <label for="file">file:</label> <input type="file" id="file" name="file" /> </p> <p><input type="submit" value="Submit" id="submit2" name="submit2" /></p> </form></fieldset> <h2>Check results</h2> <p>If the form was submitted asynchronously by Dojo, you will see results below.</p> <hr/> <div id="result"></div> </body> </html>