jQuery – dynamically generated form submit is not working in IE10

I was trying to submit a dynamically generated form in IE10 by using the following code.

var $form = $("<form/>");
$form.attr("action","action.htm")
.attr("method","post")
.append($("<input type="text" />").attr("name","var1").attr("value","SOME_DATA"))
.append($("<input type="text" />").attr("name","var2").attr("value","SOME_DATA"))
.append($("<input type="submit" value="submit" />"));
$form.submit();

The code didn’t throw any errors but it didn’t submit the form either.

The solution:

The form needs to be added to the page before it can be submitted in IE10.

var $form = $("<form/>");
$form.attr("action","action.htm")
.attr("method","post")
.append($("<input type="text" />").attr("name","var1").attr("value","SOME_DATA"))
.append($("<input type="text" />").attr("name","var2").attr("value","SOME_DATA"))
.append($("<input type="submit" value="submit" />"));
$form.hide(); // so the form won't actually show on the page
$form.appendTo("body");
$form.submit();

After adding the form to the page (See the code in bold), the form submits successfully.