How to get response from an iron-form Polymer 1 request

Question

i'm trying to get the response from an iron-form in Polymer 1 .

Form submit call a php script which return HTML code to insert in a div ( ul and some li ).

I use the iron-form event " iron-form-response " but i don't know how to get the response.

I can see the response in network tab of browser developer tools, but don't know how to get it in my element.

I don't find how to do in the iron-form documentation online .

Can someone help me please ?

Answer 1

What's happening, guys? All these responses confuse the OP when it is only this simple:

Your form:

<form is="iron-form" on-iron-form-response="responseHandler" action="http://localhost" id="myform">
   <!-- Your form elements -->
</form>

Your script:

<script>
   Polymer({
       // Some scripts here.

       // ...now your listener
       responseHandler: function(e) {
          console.log(e.detail.response);
       },                          
   });
</script>

It's just that. Nothing complicated. Don't over-complicate things.

Answer 2

Add Event Listeners to iron form.

ready: function(){
      this.$.myform.addEventListener('iron-form-response',this.formResponse);
      this.$.myform.addEventListener('iron-form-error',this.formError);
}

Form Response Function:

formResponse: function (e){
                    console.log("Server Response: ",e.detail);
}

Form Error Function:

formError: function (e){
                    console.log("Form Error: ",e.detail);
}

Answer 3

I'm going to build off of Talon's answer, which is correct.

e.detail will be a JSON object, assuming the response sent from the server is in JSON form. So, if you're using Node.JS and Express, you might have receiving code like this:

document.getElementById('my-form').addEventListener('iron-form-response', function (e) {
    console.log('Form :', e.detail);
});

And your server code might look like this:

res.status(200).json({'foo': 'bar'});

After which e.detail will be the object {"foo": "bar"}

Answer 4

Small update. I send some json with response: res.contentType('json'); es.status(500).send({"foo":"bar"}); res.contentType('json'); es.status(500).send({"foo":"bar"}); If I use 500 (error), I can reach the json data only by console.log(e.detail.request.xhr.response); In case of code 200 it is reached by: console.log(e.detail.response); Idon't get why it is so, but it's the only way for me((

Answer 5

  <script>
    Polymer({
      is: 'rsvp-wedding',
      attached: function() {
        var form = document.querySelector('form');
        form.addEventListener('iron-form-error', function(e) {
          console.log(e.detail.request.status);
        });
      }
    });
  </script>