dijit/form/Form bug in IE7/8

by psoares

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dnd.css">
<div id="form1" name="su-form" data-dojo-type="dijit/form/Form">
    <script type="dojo/on" data-dojo-event="submit" data-dojo-args="evt">
        evt.preventDefault();
        var self = this;
        
        require(["dijit/registry", "dojo/json", "dojo/request", "dojo/ready", "dojo/dom", "dojo/domReady!"],
        function(registry, json, request, ready, dom) {
            ready(function(){
                var contents = self.get("value");
        request.post("/echo/html/", {
                    handleAs: "text",
                    timeout: 5000,
                    data : contents
                }).then(function(response) {
console.debug("Response received", dom.byId("resp"));                    
                    dom.byId("resp").innerHTML = "Echo said : " + response;
                });
            });
        });
    </script>
    <select data-dojo-type="dijit/form/FilteringSelect" name="html">
        <option value="foo">Foo</option>
        <option value="bar">Bar</option>
    </select>
    
    <button data-dojo-type="dijit/form/Button"  type="submit" value="Submit">Echo</button>
</div>
<div id="resp" style="width:100%;border:1px solid red;"></div>

CSS

body, html, .main {
    height : 100%;
    width : 100%;
}

JavaScript

require([
    "dojo/parser", 
    "dojo/ready",        
    "dijit/form/Form",
    "dijit/form/FilteringSelect",
    "dijit/form/Button"
], function(parser, ready){
    ready(function(){
        parser.parse();
    });
});