Dynamically added form elements are not POSTED in IE 9

问题

I have a form which is used to make a Test. User enter a question and provides question type and the Answer options and saves the Question. What has gone wrong is that when the user writes one option and click a button for Add to Options the content of the Text Box for the Options are added to the DOM to show as an answer of the Question. This all was working well Until IE9 was not there.
When the user click on the Add to Options Button the Option is shown in the DOM but the value is not POSTED in IE9.
The function which adds the Option to the DOM is

    var tbl = document.getElementById('tbl');
    var lastRow = tbl.rows.length;
    var iteration = lastRow;
    var row = tbl.insertRow(lastRow);
    arr[ind] = iteration;

    var cellLeft1 = row.insertCell(0);
    var cellLeft2 = row.insertCell(1);
    var cellLeft3 = row.insertCell(2);
    if(document.crt_question.test_ans_view[0].checked)
    {   
        if(document.crt_question.test_ans_choice.value=="0") // MCQ with Single Answer (Radio Buttons)
        {

            var op_val=document.crt_question.test_answer.value;
            var words=op_val.split("");             
            op_val='';

            for(i=0;i<words.length;i++)
            {
                op_val = op_val + words[i].replace('"',"'");
            } 
            cellLeft1.innerHTML = '<div id="button_div'+ind+'" class="dom_"><input type="radio" name="button_'+ind+'" id="button_'+ind+'" value="'+ind+'" ></div>';
            cellLeft2.innerHTML = '|<input type="image" src="../../_images/view_del.gif" onclick="return removeRowFromTable('+ ind +')" />|';

            var newOption = document.createElement("input"); 
            newOption.name = "test_answer"+ind+"";
            newOption.type = "hidden";
            newOption.value = op_val;

            var newOption2 = document.createElement("input"); 
            newOption2.name = "view_option"+ind+"";
            newOption2.type = "text";
            newOption2.value = op_val;              
            cellLeft3.appendChild(newOption); 
            cellLeft3.appendChild(newOption2); 
            ind++;
            remove++;               
        }           
    }

The Table to which the Options are added is

  <table id="tbl" border="0"  style="padding-left:70px;">
  <tr>
    <td  align="left"></td>
    <td  align="left" ></td>
    <td  align="left"></td>                                                                                                                                     
</tr>
</table>    

In the Top function i do not get the Value of either of the Hidden value or the Input Type TEXT field when the form is SUBMITTED. This is working in FF and IE8. Any one can get on this thing?

NOTE: This code is running in a file which is included through an IFRAME.

回答1:

That issue was totally due to the IE9 Standards. In the compatibility view the error was removed. So if any one comes across this type of issue just add the following line in the head section of your document: <meta http-equiv="X-UA-Compatible" content="IE=8" />

回答2:

It is possible that you have some improper HTML. For example, a kinda random possibility that was a symptom of this and worked for me: Try changing your <div> to a <span>.

I was having the same issue with using innerHTML to insert HTML data into a div but IE9 not recognizing it. Even if I tried to just alert the field value it didn't know it existed even though it worked fine on IE8, Chrome, etc. But I changed the <div> to a <span> and voila, it understood perfectly.

As it turned out, I had some improper HTML syntax. Specifically, my <form> tag was inside a <p> tag. Unlike all the other browsers, IE9 did not forgive this and only understood my inserted elements when they were inside p > form > span instead of a p > form > div. Of course the real solution was to correct my HTML structure. Then IE9 understood the <div> as well as the <span>.

回答3:

When I test your code in IE9, it does include the fields in the POST data.

Fiddle: http://jsfiddle.net/Guffa/AeBdd/

I recreated the form and the fields from what the scripts needs. You should check if there is any relevant differences to the form and fields that you have.

Note that I had to add a property crt_question to the document object, as the form is not automatically added, either with that id or name. Do you render your page in Quirks mode? That might cause some problems.

回答4:

I just encountered this same issue. In only ie9 dynamically loaded AJAX input elements were not posting on submit -- onload created inputs would post fine. What ended up being the problem for me was a missing opening body tag.

回答5:

The same issue, the problem was missing body tag on document.

来源：https://stackoverflow.com/questions/7344033/dynamically-added-form-elements-are-not-posted-in-ie-9