表单标记的IE10问题

Question

我有html格式的div

<div id="test"></div>

如果我这样做了

$('#test').html(' <form method="GET" action="whatever"> <input type="text"/> </form>')

在IE 10中，我将获得

<div id="test">
 <input type="text">           

</div>

在Firefox或IE 8中，我将获得

<div id="test">
<form action="whatever" method="GET">
 <input type="text">
</form>

​

你能帮我处理一下IE10吗？(jquery 1.7.2)

在div test周围有另一个form标签。

Answer 1

尝试使用.html()向表单添加超文本标记语言功能，然后使用.append()推送表单中的每个元素，这样您就得到了如下内容：

$('#test').html('<form method="GET" action="whatever"></form>');
$('form [action="whatever"]').append('<input type="text"/>'); // Note for selector will be better to use ID for the form

Answer 2

您在问题的末尾表示，您正在尝试将一个表单嵌套在另一个表单中。关于表单元素的内容模型，请查看the specification：

4.10.3 The form element
  Content model:
      Flow content, but with no form element descendants.

嵌套表单元素无效。这可能是Internet Explorer 10试图保护您免受无效标记影响的原因，因为无效标记可能无法在所有浏览器中正常工作。最新版本的Google Chrome似乎也删除了无效子窗体。

如果您需要从一个表单内部提交另一个表单，请使用form attribute on按钮。这将告诉他们要提交哪个表单，而不一定是他们当前所在的表单。

4.10.18.3控件和窗体的关联

默认情况下，与表单相关联的元素与其最近的祖先表单元素相关联(如下所述)，但可以指定表单属性来覆盖此元素。

注意：此功能允许作者解决缺少对嵌套表单元素的支持的问题。

因此，您可以拥有以下内容：

<form id="one">
    <!-- This button submits #two -->
    <input type="submit" form="two">
</form>
<form id="two">
    <!-- This button submits #one -->
    <input type="submit" form="one">
</form>