使用 paper-icon-button 作为输入按钮提交表单答案

【问题标题】：Using paper-icon-button as input button to submit a form使用 paper-icon-button 作为输入按钮提交表单
【发布时间】：2016-01-03 05:10:22
【问题描述】：

我正在尝试使用 paper-icon-button 作为输入按钮来提交表单。

<form method="POST" action="self">
   <paper-icon-button icon="star" extends="input" name="favourite" noscript></paper-icon-button>
   <input type="hidden" name="hiddenId" value="1"/>                 
   <input type="hidden" is="favourite">
</form>

这似乎不是在提交表单。

我在这里做错了什么？

提前致谢。

【问题讨论】：

标签： polymer polymer-1.0 paper-elements

【解决方案1】：

您可以使用此解决方法：

<button type="submit">
  <iron-icon icon="star"></iron-icon>
</button>

别忘了导入“iron-icon”：

<link rel="import" href="bower_components/iron-icon/iron-icon.html">

也别忘了去掉按钮默认样式：

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none;
    border: 0;
}

或者按照@Ben Thomas 的建议，这样做：

<form method="POST" action="self" id="the-form">
   <paper-icon-button icon="star" extends="input" name="favourite" raised onclick="submitForm()"></paper-icon-button>
   <input type="hidden" name="hiddenId" value="1"/>                 
   <input type="hidden" is="favourite">
</form>

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

【讨论】：

【解决方案2】：

还解决“必需”的字段验证问题，

最好使用这个属性：

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

不要忘记

标签中的“is”属性：

<form is="iron-form" method="POST" action="self">

更多信息：iron-form

【讨论】：

【解决方案3】：

这是因为paper-icon-button 不是button 或input 类型的submit，因此不会提交表单。您可以做的是向调用提交表单的函数的按钮添加点击事件。

【讨论】：