dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
100 lines (85 loc) • 4.67 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Form unit test</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../css/dijitTests.css";
</style>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<!-- only needed for alternate theme testing: -->
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dojo.date");
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.form.Form");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
function submittedValues(values){
console.log('actual submitted values: ' + dojo.toJson(values));
dijit.byId("textbox").set('value', dojo.fromJson(dojo.toJson(values)).plopcombo, true);
}
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">Form Widget Submit Test</h1>
<p>Tests dojo.stopEvent() etc. calls inside dijit.form.Form onSubmit and onReset callbacks.</p>
<form id="myForm1" data-dojo-type="dijit/form/Form" data-dojo-props='encType:"multipart/form-data", action:"../formAction.html", method:"", target:"formSubmitIframe",
onSubmit:function(e){ dojo.stopEvent(e); },
onReset:function(e){ dojo.stopEvent(e); }'>
<h3>This form shouldn't submit, nor reset</h3>
<select id="combo1" data-dojo-type="dijit/form/ComboBox" data-dojo-props='name:"plopcombo","aria-label":"plopcombo" '>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<button id="submit1" data-dojo-type=dijit.form.Button data-dojo-props='type:"submit"'>Submit</button>
<button id="reset1" data-dojo-type=dijit.form.Button data-dojo-props='type:"reset"'>Reset</button>
</form>
<form id="myForm2" data-dojo-type="dijit/form/Form" data-dojo-props='encType:"multipart/form-data", action:"../formAction.html", method:"", target:"formSubmitIframe",
onSubmit:function(){ return false; },
onReset:function(){ return false; }'>
<h3>This form shouldn't submit, nor reset</h3>
<select id="combo2" data-dojo-type="dijit/form/ComboBox" data-dojo-props='name:"plopcombo","aria-label":"plopcombo2" '>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<button id="submit2" data-dojo-type=dijit.form.Button data-dojo-props='type:"submit"'>Submit</button>
<button id="reset2" data-dojo-type=dijit.form.Button data-dojo-props='type:"reset"'>Reset</button>
</form>
<form id="myForm3" data-dojo-type="dijit/form/Form" data-dojo-props='encType:"multipart/form-data", action:"../formAction.html", method:"", target:"formSubmitIframe",
onSubmit:function(){ return true; },
onReset:function(){ return true; }'>
<h3>This form <em>should</em> submit and reset</h3>
<select id="combo3" data-dojo-type="dijit/form/ComboBox" data-dojo-props='name:"plopcombo","aria-label":"plopcombo3" '>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<button id="submit3" data-dojo-type=dijit.form.Button data-dojo-props='type:"submit"'>Submit</button>
<button id="reset3" data-dojo-type=dijit.form.Button data-dojo-props='type:"reset"'>Reset</button>
</form>
<form id="myForm4" data-dojo-type="dijit/form/Form" data-dojo-props='encType:"multipart/form-data", action:"../formAction.html", method:"", target:"formSubmitIframe",
onSubmit:function(){ void(0) },
onReset:function(){ void(0) }'>
<h3>This form <em>should</em> submit and reset</h3>
<select id="combo4" data-dojo-type="dijit/form/ComboBox" data-dojo-props='name:"plopcombo","aria-label":"plopcombo4" '>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<button id="submit4" data-dojo-type=dijit.form.Button data-dojo-props='type:"submit"'>Submit</button>
<button id="reset4" data-dojo-type=dijit.form.Button data-dojo-props='type:"reset"'>Reset</button>
</form>
<h3>Submitted value:</h3>
<input id="textbox" data-dojo-type="dijit/form/TextBox" data-dojo-props='type:"text","aria-label":"textbox"'/>
<iframe name="formSubmitIframe" src="about:blank" onload="if(this.values)submittedValues(this.values)" style="display:none;"></iframe>
</body>
</html>