Polymer 1.0 Iron-form拒绝显示数据详细信息

时间:2017-02-15 16:58:57

标签: javascript polymer iron-form

几天之后我一直在研究为什么我的聚合物元素的铁形状拒绝正常工作。当我提交时,我希望从我的paper-textarea中看到看起来像我的价值的东西,因为我的文件不能识别我的id:feedbackForm。这是我的代码:

    <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>

这是我的剧本:

<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>

有人知道用铁形式发生了什么吗?当我尝试这个时,我的浏览器告诉我feedbackForm是未知的。

1 个答案:

答案 0 :(得分:1)

  1. 尝试将“feedbackForm.addEventListener(... ”更改为“document.getElementById('feedbackForm')。addEventListener(..”
  2. 事件监听器:

    document.getElementById('feedbackForm').addEventListener('iron-form-submit', function (event) {
        this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
    });
    
    1. 当HTML DOM准备就绪时,应调用事件Listerner。因此,请移动script
    2. 中的所有$(document).ready(function(){...})代码

      看起来像:

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