0

私はかなり奇妙な問題を抱えています。フォーム内のフォームが有効な HTML ではないことはわかっています。しかし、私は何か似たようなことをすることを可能にする解決策が必要です.

  • タブを作成するには、「tabifier」javascript ライブラリを使用します。タブごとに特別な ID を持つ div を使用して、さまざまなタブが作成されます。

  • 次のようなすべてのタブの周りにあるメインフォームがあります。

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

  • タブの 1 つで、フォームを使用するファイルアップロード システムを作成する必要があります。このフォームを「メインフォーム」の外に配置すると、タブレイアウトには表示されませんが、個別に表示されます。

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

これを機能させる方法はありますか？

  • fileupload を最後のサブタブとして移動してから、最後のサブタブの前にメイン フォームを終了しようとしましたが、この方法ではフォームはタブ div 内で終了します。これも有効なhtmlではありません。
  • document.getelementbyid(div).innerhtml と推測し、そのようなフォームを挿入してもうまくいきません。

アップデート：

与えられた回答に感謝しますが、それらを完全に実装する方法はよくわかりません。私は別のアイデアを思いつきました。

ファイルアップロード入力フィールドを作成するだけで、フォームで囲まれていない場合は、js 関数を呼び出すボタンを追加します。この関数は、ファイル アップロードの値を div と sumbits の外側の「非表示形式」に配置します。

それは良い解決策でしょうか？

4

3 に答える 3

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 form属性を使用できます<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 に答える
0

ここでトリックを使用できます。まず、元のラッパー フォームをそのままにしておきます。

次に、送信ボタンを fileupload フォーム内に配置する場合は、onsubmit イベントを設定し、フォームを送信する前に、fileuploads タブのすぐ近くに新しいフォームを作成し、外側のフォームを削除します。その後、新しいフォーム ID (Prototype では $(form_id).submit または通常の JavaScript では document.getElementById(form_id).submit) を使用してフォームを送信すると、新しいフォームは外部フォーム要素なしで送信されます。

于 2012-04-18T19:34:02.820 に答える