Files
openlayers/master/examples/test_Form_onsubmit.html
Éric Lemoine 5d14b9e2d4 Updated
2013-02-20 10:38:25 +01:00

100 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html>
<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">
<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" '>
<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" '>
<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" '>
<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" '>
<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"'/>
<iframe name="formSubmitIframe" src="about:blank" onload="if(this.values)submittedValues(this.values)" style="display:none;"></iframe>
</body>
</html>