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

Question

我正在尝试使用纸图标按钮作为输入按钮来提交表单。

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

这似乎不是在提交表单。

我做错了什么？

提前致谢。

Answer 1

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

Answer 2

您可以使用此解决方法：

<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();
}

Answer 3

同时解决字段验证问题 "required"、

最好使用这个属性 :

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

并且不要忘记

标签中的属性 "is" :

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

更多信息：iron-form

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

Using paper-icon-button as input button to submit a form

polymer

paper-elements

polymer-1.0