2009-11-18 5 views
24

私はそうのような別の形で埋め込まれたHTMLフォームを持つようにしたい:<form>の中にHTML <form>を埋め込んでいますか?

<form id="form1"> 
    <input name="val1"/> 
    <form id="form2"> 
    <input name="val2"/> 
    <input type="button" name="Submit Form 2 ONLY"> 
    </form> 
<input type="button" name="Submit Form 1 data including form 2"> 
</form> 

のすべて(ない私はForm1の全体を提出する必要がありますが、私はForm2のを提出したときに、私は唯一のForm2にデータを提出したいですform1。)これは動作しますか?

+1

スニペット? 2つの別々のフォームを持つことで何が問題になりますか? –

+2

あなたがしようとしていることについてさらに詳しく述べるならば、自分自身と他の人が喜んで別の解決策を提案すると確信しています。 –

+0

http://stackoverflow.com/q/555928/684229の重複はありますか? – TMS

答えて

30

あなたが説明した内容はうまくいかないでしょう。

1つの回避策は、ネストされていない2つのフォームを作成することです。オリジナルのネストされたフォームの入力を複製する、元の親フォームの隠し入力を使用します。次に、Javascript/DOM操作を使用して、「親」フォームのサブミット・イベントをフックし、フォームをサブミットできるようにする前に、「ネスト」フォームの値を「親」フォームの隠し入力にコピーします。

フォーム構造は、この(レイアウトHTMLを無視して)のようなものになります:JSメソッドを呼び出しますForm2のボタンにonClickイベントを追加し、代わりに、ネストされた形状を有するの:

<form id="form1"> 
    <input name="val1"/> 
    <input name="val2" type="hidden" /> 
    <input type="button" name="Submit Form 1 data including form 2" 
     onsubmit="return copyFromForm2Function()"> 
</form> 
<form id="form2"> 
    <input name="val2"/> 
    <input type="button" name="Submit Form 2 ONLY"> 
</form> 
28

ネストされたフォーム(source)は使用できません。

すべてのフォームは、FORMエレメント内に囲む必要があります。そこ単一のドキュメント、にいくつかの形式とすることができるがFORM要素は、それが有効ではありません

0

入れ子にすることはできませんし、私の経験では、任意の結果を生成します。

JavascriptのDOM関数を使用してform2をform1から取り出し、本体に入れて送信し、form1に戻すことができます。

編集:ネストされたフォームがまだあるため、これは100%右ではありません。いくつかの答えが指摘するように、あなたは2つの別々のフォームを持たなければなりません。 DOMマジックを使用してこれを行うことはできますが、もう少しターンを繰り返すことで、Randolphoの答えを見ることができます。

0

私はこのためのUIに問題があるかもしれないと思う。 1つのフォームの一部だけが提出され/保存された場合、ユーザーにとって非常に混乱します。

フォームがネストするのではなく、前述したように無効な場合は、おそらくデータのサブセットを更新する代わりに、いくつかのAJAX呼び出しを実装する必要があります。

1

可能な解決策をあなたの特定のアイテム(この場合はval2入力)をform1から取得し、AJAXまたは単にxmlHTTPRequests()を使用して目的のPOSTメソッドを実行できます。

0

他の人が言っているように、フォーム要素をネストすることはできません。このようなことを処理する方法は、単一のフォームを使用し、要素をフィールドセットでグループ化することです。 javascriptを使用して送信ボタンにイベントを追加し、送信する入力フィールドを有効または無効にすることができます。

jQuery、MooToolsまたは他のフレームワークでは、これは非常に簡単です。しかし、クライアントがスクリプトを無効にすると、それは中断されます。

$('submit2').addEvent('click', function (e) { 
    e.stop(); 
    $$('#fieldset1 input').set('disabled', 'disabled'); 
    $('form').submit(); 
    $$('#fieldset2 input').set('disabled', ''); 
} 

ああ、私は私にそれがここ

-2

:-)疑い悪いユーザビリティのように聞こえるので、あなたは、これを行うための十分な理由を持っている信頼:

MooToolsのソリューションは、このようになります。決定的な働きかけの答えです。余分な親DIVを作成する必要はなく、id = "place_here"という名前を付けました。テーブルセルid = "place_here"に命名し、DIV id = "div_2"の親にすることで十分でした。 これは素晴らしい作品です。別のスレッドの誰かが私にこれを手伝ってくれました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head> 
<title>test/crtp</title> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    position_mdiv()(); 
    $(window).resize(function() { 
     position_mdiv(); 
    }); 
}) 

function position_mdiv(){ 

    var pos = $('#place_here').position(); 
    var width = $('#place_here').outerWidth(); 

    $('#div_2').css({ 
    position: "absolute", 
    top: pos.top +2 + "px", 
    left: (pos.left -300 + width) + "px" 
}); 

} 

</script> 
<body> 

<form id="CTRP_Form"> 
<table border="1"> 
<tr> 
<td> 
<div id="div_1"><input id="fnam" name="fnam" form="CTRP_Form" type="text"><input type=submit></div> 
</td> 
<td id="place_here" style="background:yellow;width:300px;padding:0px;border:solid 2px #CCC"></td> 
</tr> 
</table> 
</form> 


<div id="div_2"><form id="query_Form"><input id="MyQuery" name="MyQuery" form="query_Form" type="text"><input type=submit></form></div> 

</body> 
</html> 
0

フォームに複数の送信ボタンがあることで解決しました。これらのボタンはさまざまなCGIを参照し、CGIの条件付き処理を処理するために必要な追加フィールドを持っています。あなたがこれを必要とするのはなぜ

コードは

<form name="ep" method="put" action="/cgi-bin/edit_plan.pl"> 
    [...] 
    <tr> 
     <td><input type="text" size="20" value="red" name="RN0"></td> 
     <td><input type="text" size="3" value="2" name="RT0"></td> 
     <td><input type="submit" value="Set row 0" name="RUN0"></td> 
    </tr> 
    [...] Add as many rows as needed, increment the 0 in all places Add an ending submit for overall processing instead of row processing: <input type="submit" value="Set ALL" name="SET"> 
</form> 
+0

OPと共有できるスニペットはありますか? – Daniel

+0

ターゲットであるperlスクリプトedit_plan.plは、プッシュの処理方法を制御するためにサブミットの名前を解析します。 –

+0

[...] ​​の ​​の ​​の [...] 必要な数の行を追加し、すべての場所で0をインクリメントします。 処理の代わりに、全体の処理の終了サブミットを追加します。

関連する問題