0

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.

arousseau
  • 21
  • 2

1 Answers1

1
  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',
  });

}));

Sajib Khan
  • 22,878
  • 9
  • 63
  • 73
  • Thanks for your answer, I tried, it doesn't work and it's an other problem I noticed with my Polymer elements and I wanted to talk about it in an other topic. All my document.getElementById('myElementId') and document.querySelector('myClassElement') are null. So addEventListener return an error. – arousseau Feb 16 '17 at 09:33
  • `document.getElementById('myElementId')... ` returning error so, seems like your script codes are rendering when HTML DOM is not ready yet. Try jQuery `$(document).ready()`. – Sajib Khan Feb 16 '17 at 09:58
  • Well, before that I tried to use JQuery, but it seems that JQuery and Polymer is a bit messy : http://www.baasic.com/2014/10/03/Using-jQuery-with-Web-components/ But I'll try again to find a way to use JQuery in polymer element.. – arousseau Feb 16 '17 at 10:36