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