title: How to submit Polymer forms to PHP and display response
body: <p>Using Polymer 1.0, I set up an iron-form to submit a simple contact form. The idea is to submit the form to a database table using PHP and then display a response from the PHP side into the browser without refreshing - typical AJAX. I'm getting hung up on the Polymer environment though - it seems like there should be a correct way to do this, but hours of searching and tinkering hasn't been fruitful.</p>
  
  <p>I did start this project using the Polymer Starter Kit (lite), which uses a script (app.js) to add event listeners and such. So far I haven't broken that functionality, though all of the examples in documentation do NOT do it this way, so it makes things a little more complicated since I'm still getting used to Polymer in general.</p>
  
  <p>Here's what I've got so far. Thanks so much for any advice you can offer.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!-- this is where the output should be displayed --&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
  
  &lt;!-- this is the web form --&gt;
  &lt;form is="iron-form" id="contactus-form" method="post" action="/"&gt;
  &lt;input type="hidden" name="action" value="contactus-form"&gt;
  &lt;paper-input id="contactus-field-Name" name="Name" label="Name" value="test"&gt;&lt;/paper-input&gt;
  &lt;paper-button onclick="submitHandler(event)"&gt;Send&lt;/paper-button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code>&lt;script src="script/app.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function submitHandler(event) {
      Polymer.dom(event).localTarget.parentElement.submit();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>(function(document) {
    'use strict';
  
    addEventListener('iron-form-submit', function(e) {
  
      // this works and displays the POSTed values in the browser
      document.querySelector('#output').innerHTML = JSON.stringify(e.detail);
  
      // I'm looking for a way to first submit this data through PHP and 
      // display the output of that process in the #output div rather than the 
      // raw form input itself.
  
      }
  })(document);
  </code></pre>
  
  <p><strong>FAILED METHOD 1</strong></p>
  
  <p>I tried adding an iron-ajax element into <em>index.html</em> and referencing it from <em>app.js</em> as shown below. Unfortunately, when it tries to add the event listener, the entire app crashes. It seems strange because there are many other pieces in app.js which add event listeners in the same way.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;iron-ajax id="contactus-output" url="/form/contact.php" params="" handle-as="json"&gt;&lt;/iron-ajax&gt;
  &lt;!-- same form as before goes here --&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var coutput = document.querySelector('#contactus-output');
  coutput.addEventListener('response', function() {
      // nothing fancy here yet, just trying to see if I can do this
      document.querySelector('#output').innerHTML = 'hello world';
      }
  </code></pre>
  
  <p><strong>FAILED METHOD 2</strong></p>
  
  <p>I found <a href="https://stackoverflow.com/questions/31250969/how-to-get-response-from-an-iron-form-polymer-1-request">This Answer on SO</a> and decided to try the <code>iron-form-response</code> event. The output I receive now is <code>[object HTMLElement]</code>, which is at least something, although I'm not sure if it is actually working or not. </p>
  
  <p>Everything else staying the same, I changed the target of my form to point to my php script and then replaced what I had in app.js with the following:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>addEventListener('iron-form-response', function(e) {
    document.querySelector('#output').innerHTML = e.detail;
  });
  </code></pre>
  
  <p>Am I getting any closer?</p>
  
  <p><strong>NOT GIVING UP</strong></p>
  
  <p>Using my second failed method above, the iron-form appears to be making a request, because when I listen for the 'iron-form-response' event, it does fire. </p>
  
  <p>However, the only thing that gets returned is <code>[object HTMLElement]</code> - no idea what to do with that. I tried spitting out some of its properties (as documented on developer.mozilla.org - <code>.title</code>, <code>.properties</code>, <code>.style</code>, etc) but they appear to be empty. Does iron-form really return an HTMLElement object or is this a mistake? I had figured it would return the results from the PHP script I'm submitting the form to just like a normal <code>XMLHttpRequest</code>. If iron-form somehow compresses this into an object, is there a way to pull it out again?</p>
  
  <p><strong>TL;DR</strong></p>
  
  <p>I think what this entire thing boils down to is this: HOW can I properly add an Event Listener (for <code>iron-form-request</code>) when my iron-form is in index.html and index.html is bootstrapped by app.js as happens by default in the Polymer 1.0 Starter Kit?</p>
  
  <p><strong>Further Simplified:</strong> How do I add event listeners properly to Polymer's shadow DOM when I'm NOT creating an element (just using it)?</p>
  
  <p><strong>BUG?</strong></p>
  
  <p>With the help of user2422321's wonderful answer below, the iron-request is being performed and a successful iron-request response is received. However, its "response" property returns NULL even though "succeeded" returns true, there were no errors, and the XHR resolved completely. Both "get" and "post" methods were tested with the same NULL result.</p>
  
  <p>I see that there was a bug which matches these symptoms precisely logged in GitHub 10 days ago, though it hasn't seen much attention: <a href="https://github.com/PolymerElements/iron-form/issues/83" rel="nofollow noreferrer">Issue 83</a>. This is unfortunate, but it appears to be a bug. I'm not convinced there will be any way to get this working until the element itself is repaired.</p>
  
  <p><strong>WHAT DOES IRON-REQUEST WANT TO SEE?!</strong></p>
  
  <p>As I explore this further, I see that even the XHR directly is returning "null" even though it has the responseURL correct and a statusText of "OK". I'm beginning to wonder if the actual PHP script I'm trying to run - which currently just outputs "Hello World" - is at fault.</p>
  
  <p>Does <code>iron-form-request</code> expect a certain format or data type in the results? I tried adding <code>header('Content-Type: text/plain');</code> to my PHP file, then I tried formatting it as a verified JSON string, but response is still <code>null</code>. Seems that nothing works.</p>
  
  <p>Old school direct <code>XMLHttpRequest</code>s work normally... is iron-form malforming something before the request even gets submitted?</p>
  
  <p>I did set up a handler to catch iron-form-error but none are received. According to <em>every single piece of information</em> in the response, everything is perfect in the world. Just... null response. Over and over and over again... this is so incredibly frustrating.</p>
  
  <p><strong>SOLUTION!</strong> (sort of)</p>
  
  <p>Okay, I got desperate enough that I started thumbing through the iron source code itself. It appears that iron-form is still somewhat glitchy at the moment and only returns content if the response is properly formatted json. In <em>iron-request.html</em>, it appears to allow the following types, but don't be fooled. I could only get <em>json</em> to work - I assume the rest will eventually fall into line.</p>
  
  <ul>
  <li>json (application/json)</li>
  <li>text (text/plain)</li>
  <li>html (text/html)</li>
  <li>xml (application/xml)</li>
  <li>arraybuffer (application/octet-stream)</li>
  </ul>
  
  <p>Therefore, for the time being, we need to format our response as JSON and include a DOCTYPE declaration to match.</p>
  
  <p>In my case, this looks like so (thanks goes out to user2422321 for helping me so much):</p>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;div id="output"&gt;{{myOutput}}&lt;/div&gt;
  
  &lt;form is="iron-form" id="contactUsForm" method="get" action="/contactus.php" on-iron-form-response="_onResponseRetrieved"&gt;
  &lt;paper-input id="Name" name="Name" value="text" label="Name"&gt;&lt;/paper-input&gt;
  &lt;paper-button id="contactSubmitButton" on-tap="_submitHandler"&gt;Submit&lt;/paper-button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>(function(document) {
  ...
  app._onResponseRetrieved = function(e) {
    this.myOutput = e.detail;
    console.log(e);
  };
  app._submitHandler = function(e) {
    this.$.contactUsForm.submit();
  });
  ...
  })(document);
  </code></pre>
  
  <p>Then finally, and this was the important last piece of the puzzle. I hadn't previously considered that the contents this file outputs would be very important since straight up XMLHttpRequests return <em>whatever</em> the file spits out.</p>
  
  <p><strong>contactus.php</strong></p>
  
  <pre><code>&lt;?php
  // This is the line I added
  header('Content-Type: application/json');
  // Actual Code goes here
  // Then make sure to wrap your final output in JSON
  echo '{"test":"this is some test json to try"}';
  </code></pre>
  
  <p>With all those pieces in place, it works and <code>e.detail.response</code> contains the JSON response we echoed from <em>contactus.php</em>.</p>