Bug Tracker

Ticket #3527: form.elements.htm

File form.elements.htm, 5.2 KB (added by antix, 5 years ago)

Patch proposal for $.fn.serializeArray, to make IE return the same elements as other browsers

Line 
1<?xml version="1.0" encoding="UTF-8" ?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4<head>
5    <title>Sub-forms</title>
6    <style type="text/css">
7        body{background-color:#fff}
8        form p,dd{padding:5px 150px;margin:0;min-width:400px}
9        form p label:first-child{float:left;width:140px;margin-left:-148px;padding:2px;text-align:right}
10    </style>
11   
12    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
13    <!--<script type="text/javascript" src="jquery.js"></script>-->
14   
15    <script type="text/javascript">
16        /*  Patch
17            =========================== */
18
19        // get all form elements
20        function getElements(form) {
21            return $(form).find(":input")
22                    .not($(form).find("form :input"));
23        }
24
25        // get 'successful' form elements, except the submit button clicked
26        // http://www.w3.org/TR/html401/interact/forms.html#h-17.13
27        function getElementsSuccess(form) {
28            return getElements(form)
29                    .not("[name=], :submit, :reset, [disabled], :radio:not(:checked), :checkbox:not(:checked)")
30        }
31
32                $.fn.serializeArray = function() {
33                    return this.map(function() {
34                        return jQuery.nodeName(this, "form") ?
35                                    jQuery.makeArray(getElementsSuccess(this)) : this;
36                    })
37                    .map(function(i, elem) {
38                        var val = jQuery(this).val();
39                        return val == null ? null :
40                                    val.constructor == Array ?
41                                            jQuery.map(val, function(val, i) {
42                                                return { name: elem.name, value: val };
43                                            }) :
44                                            { name: elem.name, value: val };
45                    }).get();
46                }
47
48        /*  =========================== */
49
50                $(document).ready(function() {
51                    $("#Form")
52                        .prepend($("#SubForm"))
53                        .submit(function() {
54                            var expected =
55                                "Name=Name+Test&".concat(
56                                "Name=Name+2+Test&",
57                                "Checked=Checked+Test&",
58                                "Radio=Radio+3+Test&",
59                                "Description=Description+Test&",
60                                "Type=Type+Two+Test");
61
62                            var result = $(this).serialize();
63
64                            $("#Result")
65                                .empty()
66                                .append(
67                                    "<h3>".concat(expected == result ? "Success" : "Failure", "</h3>",
68                                    "<dl>",
69                                        "<dt>Expected</dt><dd><pre>", expected.split("&").join("&\n"), "</pre></dd>",
70                                        "<dt>Result</dt><dd><pre>", result.split("&").join("&\n"), "</pre></dd>",
71                                    "</dl>")
72                                    );
73
74                            return false;
75                        });
76                });
77    </script>
78</head>
79<body>
80   
81    <form id="Form">
82        <p>
83            <label for="Name">Name</label>
84            <input id="Name" name="Name" value="Name Test" />
85        </p>
86        <p>
87            <label for="Name2">Name 2</label>
88            <input id="Name2" name="Name" value="Name 2 Test" />
89        </p>
90        <p>
91            <label for="Name3">Name 3 Disabled</label>
92            <input id="Name3" name="Name" value="Name 3 Test" disabled="disabled" />
93        </p>
94        <p>
95            <label for="Checked">Checked</label>
96            <input id="Checked" name="Checked" value="Checked Test" type="checkbox" checked="checked" />
97        </p>
98        <p>
99            <label for="Unchecked">Unchecked</label>
100            <input id="Unchecked" name="Unchecked" value="Unchecked Test" type="checkbox" />
101        </p>
102        <p>
103            <label for="Radio1">Radio 1</label>
104            <input id="Radio1" name="Radio" value="Radio 1 Test" type="radio" />
105            <label for="Radio2">Radio 2</label>
106            <input id="Radio2" name="Radio" value="Radio 2 Test" type="radio" />
107            <label for="Radio3">Radio 3</label>
108            <input id="Radio3" name="Radio" value="Radio 3 Test" type="radio" checked="checked" />
109        </p>
110        <p>
111            <label for="Description">Description</label>
112            <textarea id="Description" name="Description">Description Test</textarea>
113        </p>
114        <p>
115            <label for="Type">Type</label>
116            <select id="Type" name="Type">
117                <option>Type One Test</option>
118                <option selected="selected">Type Two Test</option>
119                <option>Type Three Test</option>
120            </select>
121        </p>
122        <p>
123            <label for="NoName">No Name</label>
124            <input id="NoName" value="No Name Test" />
125        </p>
126       
127        <p>
128            <input name="Submit1" type="submit" value="Submit 1 Test" />
129            <input name="Submit2" type="submit" value="Submit 2 Test" />
130            <input name="Reset" type="reset" value="Reset Test" />
131        </p>
132   
133    </form>
134
135    <form id="SubForm">
136   
137        <p>
138            <label for="SubFormItem">Sub Form Item</label>
139            <input id="SubFormItem" name="SubFormItem" value="Sub Form Item Test" />
140        </p>
141       
142    </form>
143   
144    <div id="Result"></div>
145
146</body>
147</html>