You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
5.5 KiB
177 lines
5.5 KiB
<!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>
|
|
|