Ticket #2844: dojoform.html

File dojoform.html, 3.4 kB (added by jaredj, 18 months ago)
Line 
1<html>
2        <head>
3                <title>DOJOTEST</title>
4        </head>
5        <body>
6                NB: This page uses some "document.write" statements to print JS variables, please allow the blocked content for it to operate properly!
7
8                <br>
9                <br>
10
11                <b>
12                        The two forms below both use dojo.io.FormBind to submit through Dojo/AJAX.
13                        <br>
14                        The response handler simply uses alert() to signal that the rsponse was received.
15                        <br>
16                        Load this page on FF and on IE and notice that submitting the bad form causes a JS exception in the Dojo code only on IE.
17                </b>
18
19                <br>
20                <br>
21
22                Here is a good form:
23                <form name="testform_good" id="testform_good_id" action="dojoform.html" method="POST">
24                        <input type="submit" name="input1" value="input1"/>
25                        <br>
26                        <input type="submit" name="not_action" value="not_action"/>
27                </form>
28
29                Here is a bad form:
30                <form name="testform_bad" id="testform_bad_id" action="dojoform.html" method="POST">
31                        <input type="submit" name="input1" value="input1"/>
32                        <br>
33                        <input type="submit" name="action" value="action"/>
34                </form>
35
36                <br>
37                <br>
38
39                <b>
40                        Below you can see the various ways to try to get the form's action and their results for each form.
41                        <br>
42                        Load this page on FF and on IE and notice that only the third retrieval method correctly gets the action on both browsers.
43                </b>
44
45                <script src="dojo/dojo.js" type="text/javascript"></script>
46                <script type="text/javascript">
47                        dojo.require("dojo.io.*");
48                        var tfgood = document.getElementById( "testform_good_id" );
49                        var tfbad = document.getElementById( "testform_bad_id" );
50
51                        var handler = function(){
52                                alert( "response received" );
53                        };
54
55                        // Bind the form submission (by button click) to the callback method
56                        var reqHeaders = new Array();
57                        reqHeaders["If-Modified-Since"] = "Sat, 1 Jan 2000 00:00:00 GMT";
58                        var x = new dojo.io.FormBind(
59                                {
60                                        headers:  reqHeaders,
61                                        mimetype: "text/html",
62                                        formNode: tfgood,
63                                        load:     handler
64                                }
65                        );
66                        var y = new dojo.io.FormBind(
67                                {
68                                        headers:  reqHeaders,
69                                        mimetype: "text/html",
70                                        formNode: tfbad,
71                                        load:     handler
72                                }
73                        );
74
75
76                        document.write( "<br><br><b>form.action</b><br>" );
77                        document.write( "This will return an input element named 'action' on both browsers." );
78                        document.write( "<br>" );
79                        document.write( "testform_good.action: " + tfgood.action );
80                        document.write( "<br>" );
81                        document.write( "testform_bad.action: " + tfbad.action );
82
83                        document.write( "<br><br><b>form.getAttribute( 'action' )</b><br>" );
84                        document.write( "This will return an input element named 'action' on IE, but the form action on FF." );
85                        document.write( "<br>" );
86                        document.write( "testform_good.getAttribute( 'action' ): " + tfgood.getAttribute( "action" ) );
87                        document.write( "<br>" );
88                        document.write( "testform_bad.getAttribute( 'action' ): " + tfbad.getAttribute( "action" ) );
89
90                        document.write( "<br><br><b>form.getAttributeNode( 'action' ).value</b><br>" );
91                        document.write( "This will return the form action on both browsers." );
92                        document.write( "<br>" );
93                        document.write( "testform_good.getAttributeNode( 'action' ).value: " + tfgood.getAttributeNode( "action" ).value );
94                        document.write( "<br>" );
95                        document.write( "testform_bad.getAttributeNode( 'action' ).value: " + tfbad.getAttributeNode( "action" ).value );
96                </script>
97               
98                <br><br><br>
99
100                To resolve this problem, the dojo code needs to be updated to use getAttributeNode( key ).value rather than getAttribute( key ).
101        </body>
102</html>