在較大的<form>內嵌入HTML <form>？

我想有嵌入另一種形式，像這樣的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>

我需要提交Form 1的全部，但是當我提交窗口2我只是想在窗口2提交數據（而不是在一切form1。）這會工作嗎？

來源

2009-11-18 MikeN

爲什麼需要這個？有兩種不同的形式有什麼不對？ – 2009-11-18 20:56:00

如果你提供更多關於你想要做什麼的細節，我肯定我和其他人會很樂意提出替代解決方案。 – 2009-11-18 20:56:29

重複的http://stackoverflow.com/q/555928/684229？ – TMS 2013-04-11 17:07:30

你所描述的將不起作用。

一種解決方法是創建兩個不嵌套的表單。您將使用原始父窗體的隱藏輸入來複制原始嵌套窗體的輸入。然後，在允許表單提交之前，使用Javascript/DOM操作將提交事件掛接到「父」表單上，將「嵌套」表單中的值複製到「父」表單中的隱藏輸入中。

你的形式結構會是這個樣子（忽略佈局HTML）：

<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>

來源

2009-11-18 20:57:30 Randolpho

你不能有嵌套窗體（source），所以這不會工作。

每個表單都必須包含在FORM元素中。可以有幾種形式單一文件，中但FORM元素不能嵌套

來源

2009-11-18 20:53:58

這不是有效的，並會在我的經驗產生任意性的結果。

您可以使用Javascript的DOM函數解決這個問題，將form2從form1中取出，放入body中，提交併放回到form1中。

編輯：這也不會100％正確，因爲它仍然有嵌套的形式。正如一些答案指出的那樣，你必須有兩種獨立的形式。你仍然可以使用DOM魔術來做到這一點，但還需要再花幾個回合 - 請看Randolpho的回答。

來源

2009-11-18 20:54:46

我認爲這可能是UI的問題。如果只有部分（似乎是）單個表單被提交/保存，那麼對於用戶來說會非常困惑。

而不是嵌套形式，如上所述，這是無效的，我認爲你需要看看可能實現一些AJAX調用，而不是更新數據的子集。

來源

2009-11-18 20:56:40

一個可能的解決方案：除了具有嵌套形式，添加一個onClick事件到Form2按鈕，將調用JS方法可以從form1中獲取特定項目（在本例中爲val2輸入），並使用AJAX或簡單的xmlHTTPRequests（）來執行所需的POST方法。

來源

2009-11-18 20:59:25 Freddy

正如其他人所說，你不能嵌套表單元素。我會處理這樣的事情的方式是使用單個表單，然後用fieldset將這些元素分組。然後，您可以使用javascript將事件添加到提交按鈕，並啓用/禁用應提交的輸入字段。

使用jQuery，MooTools或任何其他框架，這將是非常簡單的。但是，如果客戶端禁用腳本，它將會中斷。

一個MooTools的解決辦法是這樣的：

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

哦，我相信你有一個很好的理由這樣做，因爲對我來說這聽起來很像壞可用性:-)

來源

2010-05-05 14:25:42 AHM

-2

這裏是最終的工作答案。我不需要創建一個額外的父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>

來源

2013-03-10 17:15:52 JTJohnston

我通過在窗體中有多個提交按鈕來解決這個問題。這些按鈕引用了不同的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>

來源

2018-01-28 16:54:39

你有一個片段，你可以與OP分享？ – Daniel 2018-01-28 17:14:19

作爲目標的perl腳本edit_plan.pl解析提交的名稱以控制put的處理方式： – 2018-02-22 01:28:02

– 2018-02-22 01:45:14

在較大的<form>內嵌入HTML <form>？

回答

相關問題