窗體內表格替代

我有一個相當奇怪的問題。我知道表單內的表單不是有效的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並插入這樣的表單將無法正常工作。

UPDATE：

感謝給予的答案，但我不太明白如何充分執行。我想出了另一個想法。

如果我只是創建fileupload輸入字段，但沒有用窗體包圍，然後添加一個調用js函數的按鈕。這個函數將文件上載的值放置在div外部的'不可見形式'中，並且進行取消。

這是一個很好的解決方案嗎？

來源

2012-04-18 user1232673

我建議讓文件上傳過程成爲父窗體的一部分，用它代替某種形式的Ajax上傳。使用表單內的表單進行遊戲永遠不會很好。 – BenOfTheNorth 2012-04-18 19:12:55

將您在外部形式的文件上傳控件：

<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-18 19:16:05 FtDRbwLXw6

你可以在這裏使用一個小技巧。首先保留最初的包裝形式。

然後，如果您將一個提交按鈕放在fileupload表單中，請設置一個onsubmit事件，並在發送表單之前在fileuploads選項卡周圍創建一個新表單，並刪除外部表單。如果您之後使用新的表單標識（$（form_id）.submit在Prototype中或者document.getElementById（form_id）.submit以正常的javascript）發送表單，那麼新表單將發送時沒有外部表單元素。

來源

2012-04-18 19:34:02 Opi

您可以使用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建議），因爲它不支持此屬性的。

來源

2012-04-18 19:57:47

關於您的更新：這將是一個很好的解決方案，但用我的方法，你只需要將它應用於IE。所有其他瀏覽器都會識別「form」屬性（基本上與JS相同） – 2012-04-19 13:01:30

窗體內表格替代

回答

相關問題