Polymer Iron-Form response

Question

I'm using Polymer's Iron-Form component to submit this form I have created, but the problem is that the response from the php script won't output to the actual html. I'm stuck on how to do this and have tried many different things. What am I doing wrong? Here's my scrpits:

<dom-module id="user-signup">
  <template>
      <form is="iron-form" id="formGet" method="post" action="/core/register.php">
      <paper-input char-counter autoValidate="true" error-message="{{item.error_name}}" label="Username" maxlength="25" required name="username"></paper-input>
      <paper-input char-counter error-message="{{error_displayn}}" label="Display Name" maxlength="35" required name="displayname"></paper-input>
      <paper-input char-counter error-message="{{error_password}}" label="Password" maxlength="25" required type="password" name="password"></paper-input>
      <paper-input char-counter error-message="{{error_password}}" label="Confrim Password" maxlength="25" required type="password" name="cfmpassword"></paper-input>
      <gold-email-input class="paper-input-input" label="Email" required name="email" auto-validate error-message="{{error_email}}"></gold-email-input>

      <br />

      <br>

        <paper-button raised onclick="clickHandler(event)"><iron-icon icon="check"></iron-icon>Submit</paper-button>
    </form>

</template>

<script>

    function clickHandler(event) {
        Polymer.dom(event).localTarget.parentElement.submit();           
    }

    Polymer({
        is: 'user-signup',
        properties: {
            error_name: {
                type: String,
                value:"Username Is Invalid!"
            },
            error_displayn: {
                type: String,
                value:"Display Name Is Invalid!"
            },
            error_password: {
                type: String,
                value:"Password Is Invalid!"
            },
            error_email: {
                type: String,
                value:"Email Is Invalid!"
            }
        },

        listeners: {
            'iron-form-response': 'formResponse',
            'iron-form-submit': 'formSubmit',
            'iron-form-error': 'formError'
        },
        formSubmit: function(event) {
            var pmn = document.querySelector('#waitForResponse');
            pmn.setAttribute("opened", "true");
            console.log("Form was submitted");

        },
        formResponse: function(event) {
            setTimeout(function(){
            var pmn = document.querySelector('#waitForResponse');
            pmn.removeAttribute("opened");
            }, 5000)
            console.log('There was a response');
            var response = event.detail;
            alert(response);                
        },
        formError: function(event) {
            console.log('Form Error, no actual response');
            setTimeout(function(){document.querySelector('#errorToast').show();
            var pmn = document.querySelector('#waitForResponse');
            pmn.removeAttribute("opened");
            }, 5000)
        }
    });
</script>
</dom-module>

Now the listeners work and when there is a response from the php page, the alert pops up but it says: [Object object]. Here is the php script:

<?php
     $data[] = array(
        "id" => $id, 
        "error_name" => $error_name,
        "success" => true
      );

     echo 'dd';
?>

I have tried to echo $data as json but what didn't work either. I've tried to search it on Google and Stack but haven't found anything. What am I doing wrong?

Answer 1

according to the docs you have binded your listeners to a host element and not to form itself.

maybe this will help:

    listeners: {
        'formGet.iron-form-response': 'formResponse',
        'formGet.iron-form-submit': 'formSubmit',
        'formGet.iron-form-error': 'formError'
    }

Answer 2

whats the model object, that your successful login call on php would return?

you could use the following, cosume the json coming back inside JS promise

$myPhpCallLogon.then(function(user) {   
  user.firstName...
  user.id...
  user.email...

    var polyListUser = document.querySelector('#userView');

    set watch vars in polyListUser element.... 
}

and then user your template to get the name,id, email etc into the dom of your element that displays the user.