时间戳

首页 > 解决方案 > HTML 字段集：表单属性不起作用

html - HTML 字段集：表单属性不起作用

问题描述

出于布局原因，我正在尝试创建一个 HTML 表单是单独的部分。据我了解，您可以使用fieldset带有form属性的afieldset与表单相关联，即使它不在表单内（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/字段集）。

但是，如果我有一个带有提交按钮或其他输入的单独字段集，它似乎不起作用。

<form id="test">
    <input name="inside-stuff" value="Inside">
    <button type="submit">Doit Inside</button>
</form>
<fieldset form="test">
    <input name="outside-stuff" value="Outside">
    <button type="submit">Doit Outside</button>
</fieldset>

在上面的代码片段中，我有两个提交按钮和两个输入。实际表格中的那个有效，而附件中的那个fieldset无效。当我使用内部提交按钮时，它只提交主表单中的内容，而不是关联的fieldset.

这在运行代码片段时可能并不明显，但在现实生活中尝试时确实如此。

使这项工作缺少什么？

更新 1

这个问题似乎比这更普遍。我发现关联字段集中的输入元素也没有被提交。

更新 2

这不是使用 <form> 标签外的按钮提交表单的副本。这个问题专门指一个 fieldset 元素。另一个甚至没有提到它。

标签： htmlformsform-submitfieldset

解决方案

I wrote the following javascript

function control() {
  function view(i) {
    var frm = items[i].getAttribute("form");
    var fBase = document.querySelector("form[id=" + frm + "]");
    fBase.addEventListener("submit",  function(){
      var fld = document.querySelector("fieldset[form='" + this.id + "']");
      var cln = fld.cloneNode(true);
      cln.style.display = "none";
      document.getElementById(frm).appendChild(cln);         
    },true);
  }

  var items = document.querySelectorAll("FIELDSET[form]");
  
  var getter = function () {
    return this.getAttribute("form"); 
  };

  for(var i = 0; i < items.length; i++) {
    view(i);
    Object.defineProperty(items[i], 'form', {
      get: getter
    });
  }
}
window.addEventListener("load",control,true);

推荐阅读