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

【问题标题】：Polymer iron-form - disable submit?聚合物铁形式 - 禁用提交？
【发布时间】：2018-05-10 00:10:46
【问题描述】：

我正在使用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 取消按钮？

【问题讨论】：

标签： post polymer

【解决方案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

【讨论】：