Question

我有一个相当奇怪的问题。我知道表单中的表单不是有效的HTML。但我需要一个允许我做类似事情的解决方案。

我使用'tabifier'javascript库来创建标签。通过使用每个选项卡具有特殊ID的div来创建不同的选项卡。

我有一个主窗体，它围绕所有标签：

<form id=......>
   <div id=...>
   </div>
   <div id=...>
   </div>
</form>

在其中一个标签中，我需要创建一个使用表单的文件上传系统。如果我将此表单放在“主表单”之外，它不会显示在选项卡布局中，而是单独显示。
```
<form id=......>
   <div id=...>
   </div>
   <div id=...>
   </div>
   <div id='fileuploads'>
        <form id=......>
        </form>
   </div>
</form>
```

有没有办法让这项工作？

我尝试将fileupload作为最后一个子选项卡移动，然后在最后一个子选项卡之前结束主窗体，但这样表单在tab div内结束。这也是无效的HTML。
我猜这个document.getelementbyid（div）.innerhtml并插入那样的表单也不行。

更新：

感谢您给出的答案，虽然我不太明白如何全面实施它们。我提出了另一个想法。

如果我只创建了fileupload输入字段，但没有用表单包围，然后添加一个调用js函数的按钮。这个函数将文件上传量的值放在div和sumbits之外的“不可见形式”中。

这会是一个很好的解决方案吗？

Answer 1

将文件上传控件放在外部表单中：

<form id=...>
    <!-- other tabs go here -->
    <div id="fileuploads">
        <!-- your file upload controls and markup go here -->
    </div>
    <!-- other tabs go here -->
</form>

Answer 2

你可以在这里使用一个技巧。首先保留原始包装形式inact。

然后，如果在fileupload表单中放置一个提交按钮，则设置一个onsubmit事件，然后在发送表单之前在fileuploads选项卡周围创建一个新表单，并删除外部表单。如果您之后使用新的表单ID（$（form_id）.submit在Prototype或document.getElementById（form_id）.submit in normal javascript）发送表单，新表单将在没有外部表单元素的情况下发送。

Answer 3

您可以使用HTML 5 <input> form attribute

<form id="fileuploads" action="http://yo.ur/target/" method="POST"></form>
<form id="mainform">
   <div id="first_tab">
   </div>
   <div id="second_tab">
   </div>
   <div id="fileuploads">
        <input type="text" name="desc" form="fileuploads">
        <input type="file" name="file" form="fileuploads">
        <input type="submit" value="Submit" form="fileuploads">
   </div>
</form>

唯一的问题是你必须为Internet Explorer提供JS回退（如Opi建议的那样），因为它根本不支持这个属性。

形式内部形式替代

3 个答案: