在 div 中提交按钮时出现铁形错误

Posted 2023-02-26

【中文标题】在 div 中提交按钮时出现铁形错误

【英文标题】：iron-form error when submit button in div

【发布时间】：2016-07-27 19:39:56

【问题描述】：

当我尝试提交一个铁表格时，我收到了这个错误：

VM7938:3 Uncaught TypeError: Polymer.dom(...).localTarget.parentElement.submit 不是函数

但这只发生在提交按钮位于 div 中时。

这行得通：

<paper-button onclick="_submit(event)">Submit</paper-button>
<paper-button dialog-dismiss onclick="_reset(event)">Cancel</paper-button>

这不是：

<div class="buttons">
  <paper-button onclick="_submit(event)">Submit</paper-button>
  <paper-button dialog-dismiss onclick="_reset(event)">Cancel</paper-button>
</div>

下面是带有代码的表单：

  <form is="iron-form" method="get" action="/" id="basic">
    <paper-input label="Title" name="title" char-counter maxlength="25" required error-message="Fill in a title"></paper-input>
    <paper-textarea label="URL" name="url" required error-message="Fill in an URL"></paper-textarea>
    <div class="buttons">
      <paper-button onclick="_submit(event)">Submit</paper-button>
      <paper-button dialog-dismiss onclick="_reset(event)">Cancel</paper-button>
    </div>

    <div class="output"></div>
  </form>
  <script>
    function _submit(event) 
      Polymer.dom(event).localTarget.parentElement.submit();
    
    function _reset(event) 
      var form = Polymer.dom(event).localTarget.parentElement
      form.reset();
      form.querySelector('.output').innerhtml = '';
    
    basic.addEventListener('iron-form-submit', function(event) 
      this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
    );
  </script>

它位于对话框中。我已经使用 bower 下载了该元素，并将其与导入链接。

有人知道如何解决这个问题或它是如何发生的吗？

提前谢谢你。

【参考方案1】：

在您的代码中，_submit 假定元素的特定顺序。具体来说，它假定Polymer.dom(event).localTarget.parentElement 是form 元素，因此如果您移动提交按钮，则必须更改该代码以匹配新路径。在您的情况下，form 是包含提交按钮的div 的父级，因此表单的正确路径是：

 Polymer.dom(event).localTarget  // paper-button
   .parentElement                // div.buttons
   .parentElement                // form
   .submit();

不需要特定路径的更灵活的解决方案是在文档中查询form 元素：

function _submit(event) 
  // <form id="my-form" ...>
  var form = document.querySelector('#my-form');
  if (form) 
    form.submit();
  

codepen

【讨论】：

非常感谢。我是 Polymer 的新手，它是 dom。你真的帮助了我，让我更多地意识到它是如何工作的。谢谢！