以下是有效的html:
<form action="a">
<input.../>
<form action="b">
<input.../>
<input.../>
<input.../>
</form>
<input.../>
</form>
当你提交b时，你只能得到内部表单中的字段。当你提交“a”时，你会得到所有字段减去“b”内的字段。
如果不可能，对于这种情况有什么可行的变通办法?
当前回答
您正在尝试实现HTML中不支持的嵌套表单。
每个表单都必须包含在form元素中。有可能 在一个文档中包含多个表单，但是FORM元素不能 嵌套。
解决方案
您可以通过对HTML和JavaScript进行一些更改来实现此功能。(不使用HTML表单)
步骤 1. 用div标签创建两个表单，如下所示(不使用表单标签)
<div id="form_a">
<input.../>
<div id="form_b">
<input.../>
<input.../>
<button id="submit_b">Submit B</button>
</div>
<input.../>
<button id="submit_a">Submit A</button>
</div >
2. 添加JQuery和Ajax来提交每个表单数据
<script>
// Submit form A data
$('#submit_a').click( function() {
$.ajax({
url: 'ajax-url',
type: 'post',
dataType: 'json',
data: $('#form_a input').not( "#form_b input" ).serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
// Submit form B data
$('#submit_b').click( function() {
$.ajax({
url: 'ajax-url',
type: 'post',
dataType: 'json',
data: $('#form_b input').serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
</script>
其他回答
一种可能是在外部形式中有一个iframe。iframe包含内部表单。确保在iframe的head标记中使用<base target="_parent" />标记，使表单表现为主页的一部分。
如果你需要你的表单向1:M关系数据库提交/提交数据，我建议在表a上创建一个“插入后”DB触发器，它将为表B插入必要的数据。
不, 看到w3c
您正在尝试实现HTML中不支持的嵌套表单。
每个表单都必须包含在form元素中。有可能 在一个文档中包含多个表单，但是FORM元素不能 嵌套。
解决方案
您可以通过对HTML和JavaScript进行一些更改来实现此功能。(不使用HTML表单)
步骤 1. 用div标签创建两个表单，如下所示(不使用表单标签)
<div id="form_a">
<input.../>
<div id="form_b">
<input.../>
<input.../>
<button id="submit_b">Submit B</button>
</div>
<input.../>
<button id="submit_a">Submit A</button>
</div >
2. 添加JQuery和Ajax来提交每个表单数据
<script>
// Submit form A data
$('#submit_a').click( function() {
$.ajax({
url: 'ajax-url',
type: 'post',
dataType: 'json',
data: $('#form_a input').not( "#form_b input" ).serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
// Submit form B data
$('#submit_b').click( function() {
$.ajax({
url: 'ajax-url',
type: 'post',
dataType: 'json',
data: $('#form_b input').serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
</script>
快速的解决方案: 要获得不同表单的不同验证，并将它们的提交保存在独立的函数中，您可以这样做:
<form id="form1" onsubmit="alert('form1')"></form>
<form id="form2" onsubmit="alert('form2')"></form>
<div>
<input form="form1" required />
<input form="form1" required />
<div>
<input form="form2" required />
<input form="form2" required />
<button form="form2" type="submit">Send form2</button>
</div>
<input form="form1" required />
<button form="form1" type="submit">Send form1</button>
</div>
