fix(headers): custom headers are not sent with submit request

Regression caused by removal of core-ajax in 1.5.0 via #42.

fixes #49

ajax-form.js

@@ -285,12 +285,23 @@
         },
 
         sendRequest = function(options) {
-            var xhr = new XMLHttpRequest();
+            var xhr = new XMLHttpRequest(),
+                customHeaders = options.form.headers;
 
             xhr.open(options.form.acceptableMethod, options.url || options.form.action);
 
             xhr.withCredentials = !!options.form.cookies;
 
+            if (customHeaders) {
+                if (typeof(customHeaders) === 'string') {
+                    customHeaders = JSON.parse(customHeaders);
+                }
+
+                Object.keys(customHeaders).forEach(function(headerName) {
+                    xhr.setRequestHeader(headerName, customHeaders[headerName]);
+                });
+            }
+
             options.contentType && xhr.setRequestHeader('Content-Type', options.contentType);
 
             xhr.onreadystatechange = function() {

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "ajax-form",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "authors": [
     "Ray Nicholus"
   ],

package.json

@@ -17,5 +17,5 @@
     "type": "git",
     "url": "https://github.com/garstasio/ajax-form.git"
   },
-  "version": "1.5.0"
+  "version": "1.5.1"
 }

test/ajax-form-tests.html

@@ -26,6 +26,10 @@
         <my-ce2></my-ce2>
     </form>
 
+    <form is="ajax-form" id="typicalFormWithHeaders" method="post" headers='{"X-Cust-Header": "FooBar", "X-Requested-By": "XMLHttpRequest"}' action="test">
+        <input name="test1" type="text" value="foobar"/>
+    </form>
+
     <form is="ajax-form" id="requiredFileInputForm" method="post" action="test">
         <file-input required></file-input>
     </form>
@@ -88,6 +92,7 @@
 
     <script>
         var typicalForm = document.querySelector('#typicalForm'),
+            typicalFormWithHeaders = document.querySelector('#typicalFormWithHeaders'),
             requiredFileInputForm = document.querySelector('#requiredFileInputForm'),
             jsonForm = document.querySelector('#jsonForm'),
             formDataForm = document.querySelector('#formDataForm'),
@@ -101,6 +106,7 @@
             it('Make sure Polymer and ajax-form are alive', function() {
                 expect(ajaxForm).to.exist;
                 expect(typicalForm).to.exist;
+                expect(typicalFormWithHeaders).to.exist;
                 expect(requiredFileInputForm).to.exist;
                 expect(jsonForm).to.exist;
                 expect(formDataForm).to.exist;
@@ -211,7 +217,7 @@
                 expect(fireCall.args[1][0].tagName).to.equal('FILE-INPUT');
 
                 expect(requiredFileInputForm.checkValidity()).to.equal(false);
-            })
+            });
         });
 
         describe('submit interception', function() {
@@ -259,6 +265,23 @@
             });
         });
 
+        describe('custom headers', function() {
+            it('sends all custom headers with the request', function() {
+                ajaxForm.domReady.call(typicalFormWithHeaders);
+                typicalFormWithHeaders.submit();
+
+                expect(requests[0].requestBody).to.have.string('test1=foobar');
+
+                var headers = requests[0].requestHeaders;
+                expect(headers['Content-Type']).to.have.string('application/x-www-form-urlencoded');
+                delete headers['Content-Type'];
+                expect(JSON.stringify(headers)).to.equal(JSON.stringify({
+                    'X-Cust-Header': 'FooBar',
+                    'X-Requested-By': 'XMLHttpRequest'
+                }));
+            });
+        });
+
         describe('JSON encoding', function() {
             it('JSON encodes the form fields and includes them in the payload', function() {
                 ajaxForm.domReady.call(jsonForm);