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

您可以使用此工作：

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

别忘了导入＆＃34;铁图标＆＃34;：

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

这是因为paper-icon-button不是类型button的{{1}}或input，因此不会提交表单。你可以做的是在按钮上添加一个click事件，该按钮调用一个提交表单的函数。

Answer 3

还要解决字段验证问题＆＃34;必需＆＃34;，

最好的方法是使用这个属性：

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

不要忘记属性＆＃34;是＆＃34;在＆lt;形式＆gt; tag：

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

更多信息：iron-form

使用纸张图标按钮作为输入按钮提交表单

3 个答案: