0

我有一个相当奇怪的问题。我知道表单中的表单不是有效的 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>

有什么办法可以使这项工作？

  • 我尝试将文件上传作为最后一个子选项卡移动，然后在最后一个子选项卡之前结束主表单，但是这样表单在选项卡 div 内结束。这也不是有效的html。
  • 我猜想 document.getelementbyid(div).innerhtml 并插入这样的表单也行不通。

更新：

感谢您提供的答案，尽管我不太了解如何完全实施它们。我想出了另一个主意。

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

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

4

3 回答 3

0

你可以在这里使用一个技巧。首先让原始包装形式保持不动。

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

于 2012-04-18T19:34:02.820 回答
0

将您的文件上传控件放在外部形式中：

<form id=...>
    <!-- other tabs go here -->
    <div id="fileuploads">
        <!-- your file upload controls and markup go here -->
    </div>
    <!-- other tabs go here -->
</form>
于 2012-04-18T19:16:05.653 回答
0

您可以使用HTML 5<input> 表单属性

<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 建议的），因为它根本不支持此属性。

于 2012-04-18T19:57:47.617 回答