CODEWITHSUNDEEP
javascriptpolymeriron-form
arousseau
arousseau

Reputation: 21

Polymer 1.0 Iron-form refuse to display data details

for few days I've been seraching why my iron-form with my polymer element refuse to work correctly. When I want to see what looks like my value from my paper-textarea when I submit I can't because my file doesn't recognise my id : feedbackForm. Here is my code :

    <form is="iron-form" method="get" action="/" id="feedbackForm">
        <paper-textarea name="feedbacks" value="{{feedbackValue::input}}"
                        label="Explain your feedback - required" required></paper-textarea>
        <paper-checkbox name="read" required>You must check this box</paper-checkbox>
        <br>
        <paper-button class="custom indigo popup" type="submit" raised onclick="submitForm(event)"></iron-icon>
            Submit
        </paper-button>
        <div class="output"></div>
    </form>

And here is my script :

<script>

    function submitForm(event) {
        console.log('enfin');
        Polymer.dom(event).localTarget.parentElement.submit();
        console.log(Polymer.dom(event).localTarget.parentElement);
    }

    feedbackForm.addEventListener('iron-form-submit', function (event) {
        this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
    });

    Polymer({
        is: 'at-feedback-panel',

    });


</script>

Does someone know what's going on with iron-form. When I try this, my browser tells me that feedbackForm is unknown.

Upvotes: 0

Views: 42

Answers (1)

Sajib Khan
Sajib Khan

Reputation: 24194

  1. Try changing "feedbackForm.addEventListener(..." to "document.getElementById('feedbackForm').addEventListener(.."

Event Listener:

document.getElementById('feedbackForm').addEventListener('iron-form-submit', function (event) {
    this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
});
  1. Event Listerner should be called when HTML DOM is ready. So, move your all script codes inside $(document).ready(function(){...})

Looks like:

<script>

$(document).ready(function({

  function submitForm(event) {
    console.log('enfin');
    Polymer.dom(event).localTarget.parentElement.submit();
    console.log(Polymer.dom(event).localTarget.parentElement);
  }

  document.getElementById('feedbackForm').addEventListener('iron-form-submit', function (event) {
    this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
  });

  Polymer({
    is: 'at-feedback-panel',
  });

}));

Upvotes: 1

Related Questions