OLD | NEW |
| (Empty) |
1 | |
2 /* | |
3 ``<iron-form>` is an HTML `<form>` element that can validate and submit any cust
om | |
4 elements that implement `Polymer.IronFormElementBehavior`, as well as any | |
5 native HTML elements. | |
6 | |
7 It supports both `get` and `post` methods, and uses an `iron-ajax` element to | |
8 submit the form data to the action URL. | |
9 | |
10 Example: | |
11 | |
12 <form is="iron-form" id="form" method="post" action="/form/handler"> | |
13 <paper-input name="name" label="name"></paper-input> | |
14 <input name="address"> | |
15 ... | |
16 </form> | |
17 | |
18 By default, a native `<button>` element will submit this form. However, if you | |
19 want to submit it from a custom element's click handler, you need to explicitly | |
20 call the form's `submit` method. | |
21 | |
22 Example: | |
23 | |
24 <paper-button raised onclick="submitForm()">Submit</paper-button> | |
25 | |
26 function submitForm() { | |
27 document.getElementById('form').submit(); | |
28 } | |
29 | |
30 @demo demo/index.html | |
31 */ | |
32 | |
33 Polymer({ | |
34 | |
35 is: 'iron-form', | |
36 | |
37 extends: 'form', | |
38 | |
39 /** | |
40 * Fired after the form is submitted. | |
41 * | |
42 * @event iron-form-submit | |
43 */ | |
44 | |
45 /** | |
46 * Fired after the form is submitted and a response is received. | |
47 * | |
48 * @event iron-form-response | |
49 */ | |
50 | |
51 /** | |
52 * Fired after the form is submitted and an error is received. | |
53 * | |
54 * @event iron-form-error | |
55 */ | |
56 | |
57 listeners: { | |
58 'iron-form-element-register': '_registerElement', | |
59 'submit': 'submit' | |
60 }, | |
61 | |
62 ready: function() { | |
63 // Object that handles the ajax form submission request. | |
64 this._requestBot = document.createElement('iron-ajax'); | |
65 this._requestBot.addEventListener('response', this._handleFormResponse.bin
d(this)); | |
66 this._requestBot.addEventListener('error', this._handleFormError.bind(this
)); | |
67 | |
68 // Holds all the custom elements registered with this form. | |
69 this._customElements = []; | |
70 }, | |
71 | |
72 /** | |
73 * Called to submit the form. | |
74 */ | |
75 submit: function(event) { | |
76 if (!this._validate()) { | |
77 return false; | |
78 } | |
79 | |
80 var json = this.serialize(); | |
81 | |
82 this._requestBot.url = this.action; | |
83 this._requestBot.method = this.method; | |
84 this._requestBot.params = json; | |
85 | |
86 if (this.method == 'POST') { | |
87 this._requestBot.body = JSON.stringify(json); | |
88 } | |
89 | |
90 this._requestBot.generateRequest(); | |
91 this.fire('iron-form-submit', json); | |
92 | |
93 // Don't perform a page refresh. | |
94 if (event) { | |
95 event.preventDefault(); | |
96 } | |
97 | |
98 return false; | |
99 }, | |
100 | |
101 /** | |
102 * Returns a json object containing name/value pairs for all the registered | |
103 * custom components and native elements of the form. If there are elements | |
104 * with duplicate names, then their values will get aggregated into an | |
105 * array of values. | |
106 */ | |
107 serialize: function() { | |
108 var json = {}; | |
109 | |
110 function addSerializedElement(el) { | |
111 // If the name doesn't exist, add it. Otherwise, serialize it to | |
112 // an array, | |
113 if (!json[el.name]) { | |
114 json[el.name] = el.value; | |
115 } else { | |
116 if (!Array.isArray(json[el.name])) { | |
117 json[el.name] = [json[el.name]]; | |
118 } | |
119 json[el.name].push(el.value); | |
120 } | |
121 } | |
122 | |
123 // Go through all of the registered custom components. | |
124 for (var el, i = 0; el = this._customElements[i], i < this._customElements
.length; i++) { | |
125 if (el.name) { | |
126 addSerializedElement(el); | |
127 } | |
128 } | |
129 | |
130 // Also go through the form's native elements. | |
131 for (var el, i = 0; el = this.elements[i], i < this.elements.length; i++)
{ | |
132 // Checkboxes and radio buttons should only use their value if they're c
hecked. | |
133 // Also, custom elements that extend native elements (like an | |
134 // `<input is="fancy-input">`) will appear in both lists. Since they | |
135 // were already added as a custom element, they don't need | |
136 // to be re-added. | |
137 if (!el.name || !this._useValue(el) || | |
138 (el.hasAttribute('is') && json[el.name])) { | |
139 continue; | |
140 } | |
141 addSerializedElement(el); | |
142 } | |
143 | |
144 return json; | |
145 }, | |
146 | |
147 _handleFormResponse: function (event) { | |
148 this.fire('iron-form-response', event.detail.response); | |
149 }, | |
150 | |
151 _handleFormError: function (event) { | |
152 this.fire('iron-form-error', event.detail); | |
153 }, | |
154 | |
155 _registerElement: function(e) { | |
156 this._customElements.push(e.target); | |
157 }, | |
158 | |
159 _validate: function() { | |
160 var valid = true; | |
161 for (var el, i = 0; el = this._customElements[i], i < this._customElements
.length; i++) { | |
162 valid = el.validate() && valid; | |
163 } | |
164 return valid; | |
165 }, | |
166 | |
167 _useValue: function(el) { | |
168 // Checkboxes and radio buttons should only use their value if they're che
cked. | |
169 if (el.type !== 'checkbox' && el.type !== 'radio') { | |
170 return true; | |
171 } else { | |
172 return el.checked; | |
173 } | |
174 } | |
175 | |
176 }); | |
177 | |
OLD | NEW |