Why won't IE8 submit a form?

Question

I am developing a small web application specifically for IE8 (I know you all feel the pain already). In this application, I have an Update "button" that (when clicked) generates a box where they user can click Yes or No . I used JavaScript to generate the box and the input tag with type="submit" .

Here is a snippet of the code:

HTML

<form action="." method="POST" id="yield_curve_form" enctype="multipart/form-data">
    <div class="fileUploadDiv">
        <img id="yieldCurve" src="../img/market/yield_curve.jpg" alt="ZBPF Bond Market" >    
        <div class="fileUploadButton">
            <span>Upload New Image</span>
            <input type="file" name="image_file" accept="image/*" class="uploadInput">
        </div>
        <div class="fileUploadReq">    
            <p>Image Requirements:</p>
            <ul>
                <li>Format: .png, .jpg, .jpeg, .bmp, .tif, .tiff</li>
                <li>Resolution: 650 x 383</li>
                <li>Maximum size: 2.0 MB</li>
            </ul>
        </div>
    </div>
    <button type="button" class="marketUpdateButton" onclick="confirmUpdate('yield_curve');">Update</button>

JS

function confirmUpdate(name)
{
    //  Create a div element
    var div = document.createElement('div');
    //      Give it an ID
    div.id = 'preSubmitAlert';

    //  Create a child h2 tag
    var h2 = document.createElement('h2');
    h2.innerHTML = 'This is a permanent change';
   //  Create a child p tag
   var pMessage = document.createElement('p');
   pMessage.innerHTML = 'Did you double check the data? It is important the data is     accurate before you submit it.';
   //  Create child input tags
   var inputYes = document.createElement('input');
   var inputNo = document.createElement('input');
   //      Set parameters for input tags
   inputYes.type = 'submit';
   inputYes.name = name + '_update';
   inputYes.value = 'Yes. Update the data.';
   inputYes.id = 'inputYes';
   inputNo.type = 'button';
   inputNo.value = 'No. Take me back, please.';
   inputNo.id = 'inputNo';

   //  Append the children to 
   div.appendChild(h2);
   div.appendChild(pMessage);
   div.appendChild(inputYes);
   div.appendChild(inputNo);

   //  Create the background for transparency (needed for IE8 support)
   var bg_div = document.createElement('div');
   bg_div.id = 'bg_div';

   //  Create a screen and append the above div to it
   var screenDiv = document.createElement('div');
   screenDiv.id = 'screenDiv';
   //      Appending div and bg_div to screenDiv
   screenDiv.appendChild(div);
   screenDiv.appendChild(bg_div);
   //      Appending screenDiv to the body tag
   document.body.appendChild(screenDiv);
   //      This line needs a reference to the #screenDiv is, which is inserted in the DOM only in the above line.
   inputNo.onclick = function(){destroyElement(document.getElementById('screenDiv'))};
   inputYes.setAttribute('form', name + '_form');
}

Question

Why isn't the the <input type="submit" ...> not submitting the data when clicked?

Obs.: This piece of code works on every other browser, including higher versions of IE.

Thank you in advance.

Answer 1

Change this...

document.body.appendChild(screenDiv);

To this...

document.getElementById(name + '_form').appendChild(screenDiv);

I doubt very much that IE8 supports the HTML5 form attribute so you'll need to make the submit button a descendant of the form.

I can't find any official documentation on this though and I doubt anybody is going to the trouble of researching it properly.