Я хочу иметь HTML-форму, встроенную в другую форму:
<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.) Будет ли это работать?
То, что вы описали, не будет работать.
Одним из способов было бы создать две формы, которые не вложены. Вы использовали бы скрытые входы для исходной родительской формы, которые дублируют входы из вашей исходной вложенной формы. Затем используйте 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>
У вас нет вложенных форм (source), поэтому это не сработает.
Каждая форма должна быть заключена в элемент FORM. В одном документе может быть несколько форм , но элемент FORM не может быть вложен
Возможное решение: вместо того, чтобы иметь вложенную форму, добавьте событие onClick к кнопке формы2, которая вызовет метод JS, который мог бы получить ваши конкретные элементы (вход val2 в этом случае) из формы1 и использовать AJAX или просто xmlHTTPRequests ( ) для выполнения желаемых методов POST.
Это недействительно и в моем опыте произведет произвольные результаты.
Вы можете обойти это с помощью функций DOM Javascript, взяв form2 из формы1, поместив его в тело, отправив его и вернув в форму.
Изменить: это тоже не будет на 100% прав, поскольку у него все еще есть вложенные формы. Как указывают некоторые из ответов, вы должны иметь две отдельные формы. Вы все еще можете сделать это с помощью магии DOM, но с еще несколькими витками - ответьте Randolpho.
Я думаю, что для этого могут возникнуть проблемы с пользовательским интерфейсом. Это было бы очень запутанно для пользователя, если бы была передана/сохранена только часть (что-то похожее) одной формы.
Вместо того, чтобы вставлять формы, которые, как указано, недействительны, я думаю, вам нужно, возможно, выполнить некоторые вызовы AJAX вместо того, чтобы обновлять подмножество данных.
Как говорили другие люди, вы не можете вставлять элементы формы. То, как я буду обрабатывать что-то подобное, - это использовать одну форму, а затем группировать элементы с помощью полей. Затем вы можете добавлять события в кнопки отправки с помощью javascript и включать/отключать поля ввода, которые должны быть отправлены.
С jQuery, MooTools или любой другой структурой это будет очень просто. Это сломается, если клиент отключает скрипты.
Решение MooTools может выглядеть так:
$('submit2').addEvent('click', function (e) {
e.stop();
$$('#fieldset1 input').set('disabled', 'disabled');
$('form').submit();
$$('#fieldset2 input').set('disabled', '');
}
О, и я верю, что у вас есть веская причина для этого, потому что для меня это звучит подозрительно, как плохое юзабилити: -)
Вот окончательный рабочий ответ. Мне не нужно было создавать дополнительный родительский 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>