Form not showing in IE

Question

I've got the following javascript that loads a form into a hidden div on the page and the shows the div

function load() {
    ...stuff to get date and id...
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState==4&&xhttp.status==200) {
            document.getElementById("PopupDiv").innerHTML = xhttp.responseText;
            document.getElementById("PopupDiv").removeAttribute("hidden");
            alert(xhttp.responseText);
        }
    };
    xhttp.open("GET", "Object?date=" + date + "&id=" + id, true);
    xhttp.send();
}

this loads a partial view with the following:

<h2>@Model.date</h2>
<h2>@Model.id</h2>
<div id="OptionsDiv">
    @using (Html.BeginForm("Confirm", "Plan",FormMethod.Post,new { id = "OptionsForm" }))
    {
        @Html.HiddenFor(x => x.date)
        @Html.HiddenFor(x => x.id)
        @Html.LabelFor(x => x.options)
        @Html.DropDownListFor(x => x.options, Model.optionsDropdown)
        <br />
        @Html.LabelFor(x => x.comment)
        @Html.TextBoxFor(x => x.comment)
        <br />
        <input type="submit" value="Submit"/>
    }
</div>
<p>test after the div</p>

when the javascript event is triggered, it is all loaded in correctly when viewing the DOM explorer, but the form is not shown. info before and after is shown, but nothing within the form.

the alert from the response contains:

<h2>5/12/2016 12:00:00 AM</h2>

<h2>13</h2>

<div id="OptionsDiv">

<form action="/Plan/Confirm" id="PlanOptionsForm" method="post"><input data-val="true" data-val-date="The field date must be a date." data-val-required="The date field is required." id="date" name="date" type="hidden" value="5-12-2016" /><input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="13" /><label for="Options">options</label><select data-val="true" data-val-number="The field meal must be a number." data-val-required="The meal field is required." id="meal" name="meal"><option selected="selected" value="0">--Choose an Option--</option>

<option value="1">Option 1</option>

<option value="2">Option 2</option>

<option value="3">Option 3</option>

<option value="4">Option 4</option>

</select>        <br />

<label for="comment">comment</label><input data-val="true" data-val-number="The field servings must be a number." data-val-required="The comment field is required." id="comment" name="comment" type="text" value="0" />        <br />

        <input type="submit" value="Submit"/>

</form></div>

<p>test after the div</p>

If I go into the DOM explorer and select the different parts, they will show up, but the initial load looks like:

It all shows up correctly in Chrome and Firefox

Also, removing the other form on the page does not solve the problem.

Answer 1

Apparently, you can't load a form into a hidden element.

I changed the order in my JavaScript function from:

document.getElementById("PopupDiv").innerHTML = xhttp.responseText;
document.getElementById("PopupDiv").removeAttribute("hidden");

To:

document.getElementById("PopupDiv").removeAttribute("hidden");
document.getElementById("PopupDiv").innerHTML = xhttp.responseText;

and now it works.