聚合物铁形式 - 禁用提交？

Question

我正在使用 iron-form 并且正在尝试 POST 将文件发送到（当前为本地）服务器。我有两个按钮，一个用于实际发送文件，一个用于取消。我在取消时遇到问题。表格如下：

<form  is="iron-form" action="http://localhost:7733/receivedoc" id="restForm" method="post" >
  <table class="starter-inputs">
    <tr><td>
    <px-file-upload 
      id="uploadComponentId"
      message="Drag and drop files here, or click the button below." 
      multiple=false 
      accept=".xls,.xlsx">
    </px-file-upload>
    </td></tr>
    </table>
    <button class="btn btn--large btn--icon" id="saveDataSetButton">
      <i class="fa-briefcase">Generate Pacing File</i>
    </button>
    <button class="btn btn--large btn--icon" id="cancelDataSetButton">
      <i class="fa-briefcase">Cancel</i>
    </button>
    <div class="output"></div>
  </form>

cancelDataSetButton 被处理为：

this.$.cancelDataSetButton.addEventListener('click', function() {
  console.log('restForm.cancelDataSetButton click')
  restForm.reset();
  restForm.querySelector('.output').innerHTML = 'Operation cancelled.';
});

然而，由于 By default, a native element (or input type="submit") will submit this form.，POST 无论如何都会被解雇。如何防止取消按钮 POSTing？

Answer 1

这是个好问题。

我想在这里强调几件事...

首先，让我们回顾一下关于 HTML 规范的一些基础知识：

1) <button> 没有属性 type 将充当 type=submit 作为默认属性，这就是为什么 你的两个按钮都会提交 形式。

2) <button> 支持 type="reset"，这会将您的所有字段重置为初始值（例如清除它们）并且 不会提交表单，所以根本不需要 JS 处理程序代码。

总的来说，我建议对您的 HTML 代码进行一些调整，与按钮块相关：

<button type="submit" class="btn btn--large btn--icon" id="saveDataSetButton">
    <i class="fa-briefcase">Generate Pacing File</i>
</button>
<button type="reset" class="btn btn--large btn--icon" id="cancelDataSetButton">
    <i class="fa-briefcase">Cancel</i>
</button>

请注意，cancelDataSetButton 不需要 JS 代码（清除该字段），您可以删除整个事件侦听器：

this.$.cancelDataSetButton.addEventListener('click', function() { 等等。

一些需要补充的参考资料： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

聚合物铁形式 - 禁用提交？

Polymer iron-form - disable submit?

post

polymer