Question

我正在尝试使用paper-button type属性设置为submit（与button元素一样）来提交封闭的form，但由于某种原因，它无法提交表格。这是一个错误或功能吗？

如何让paper-button提交表单？

PS：我在飞镖地（不是js）。

Answer 1

正如Gunter所注意到的，你可以创建一个自定义元素，用你想要的语义扩展一些原生元素。

我也遇到了你的问题，我创建了一个简单的元素，可以提交到paper-button

<polymer-element name="paper-button-submit" extends="button" noscript>
  <template>
    <style>
      :host {
        border: 0;
        background: transparent;
        padding: 0;
        font-size: inherit;
      }
    </style>
    <paper-button>
      <content></content>
    </paper-button>
  </template>
</polymer-element>

然后你可以写这个

<button type="submit" is="paper-button-submit">Add</button>

并且会得到一个纸张般的按钮

Answer 2

您可以通过在纸质按钮元素中放置原生按钮来实现表单提交：

<paper-button>
  <button>Sign Up</button>
</paper-button>

然后使用以下CSS隐藏原生按钮，同时确保它的hitzone填充整个纸质按钮元素：

<style shim-shadowdom>
  paper-button {
    padding:0;
  }
  paper-button::shadow .button-content {
    padding:0;
  }
  paper-button button {
    padding:1em;
    background-color: transparent;
    border-color: transparent;
  }
  paper-button button::-moz-focus-inner {
    border: 0;
  }
</style>

Answer 3

在Polymer Google小组的表单中已经讨论过使用包含表单元素的Polymer元素，据我记得我在SO上回答了类似的问题（之后我会做一些研究）。

1）您可以扩展输入元素

<polymer-element name="my-element" extends="input">
   ...
</polymer-element>

并像

一样使用它

<input is="my-element">

2）您可以在自定义代码中进行表单处理
（从表单元素中读取值并创建一个AJAX调用以将数据发送到服务器）

3）创建自定义表单元素（扩展第2个）
进行表单处理和AJAX调用

第一个选项不适用于核心元素/纸张元素，因为它不会扩展<input>（或任何其他表单元素），而是嵌入它。这适用于表单输入元素以及表单提交按钮。

一些或多或少的相关主题

如果只提交按钮是Polymer元素，您可以执行的操作是在click()的单击处理程序中对不可见（非聚合物）提交按钮调用<paper-button>方法有关详细信息，请参见
- Polymer: manually submitting a form

Answer 4

无需创建自定义元素。根据{{3}}，建议采用以下方式：

<paper-button raised onclick="submitForm()">Submit</paper-button>

function submitForm() {
  document.getElementById('form').submit();
}

因此您只需将onclick事件绑定到手动提交表单的函数即可。

<强>更新

虽然iron-form的上一个示例使用onclick事件the docs使用on-tap而不是on-click：

提示：对于发生的事件，请使用on-tap而不是on-click 在触摸（移动）和点击（桌面）设备上始终如一。

使用Polymers it is recommended：

也是个好主意

function submitForm(e) {
  Polymer.dom(e).localTarget.parentElement.submit();
}

类型为＆＃34的纸质按钮;提交＆＃34;表格内没有提交？

4 个答案:

一些或多或少的相关主题