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无论如何都会被解雇。如何阻止POST的取消按钮？

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

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

1 个答案: