IE不会提交动态添加的表单字段

Question

我有一个问题，在IE后7,8和9都给我这个问题。但IE 7和所有其他浏览器都没有注意到。

在我的表格中，我动态地克隆了我的第一个DIV，这给了我一个克隆了字段的新div，这些字段是像name="myfield[]"这样的字段数组。

当我在IE 8和9提交它只是返回它，就好像只有一个元素是在数组中，而不是我克隆的许多。

这是一个完整的HTML表单和JS：

<p><strong>Choose the number of certificates you would like:</strong></p> 
<label><input name="type" value="1" checked="checked" type="radio" onclick="oneCert();" checked /> $25 for one (1) certificate</label><br> 
<label><input name="type" value="3" type="radio" onclick="threeCerts();" /> $50 for three (3) certificates</label><br> 
<label><input name="type" value="5" type="radio" onclick="fiveCerts();" /> $75 for five (5) certificates</label> 
<br><br> 
<p>A personal message for each selection is optional and must be 20 words or less.</p> 
<p><i>If you would like to purchase more than five (5) certificates, please select the $75 for five (5) certificates option and you will be able to add two (2) certificates for $25.</i></p> 
<div id="mainForm"> 

<div id="people" style="border: 2px solid #000; padding: 10px; margin: 5px;"> 
Please enter Teacher or Staff Member’s First and Last Name:<br /> 
First and Last Name of Person: <input name="person[]" value="" style="margin: 5px;" type="text" /><br /> 
<div class="error-message-person"></div> 
Teacher/Staff School: <input name="school[]" value="" style="margin: 5px;" type="text" /><br /> 
<div class="error-message-school"></div> 
Student's Full Name: <input name="student[]" value="" style="margin: 5px;" type="text" /><br /> 
<div class="error-message-student"></div> 
Parent(s) Full Name(s): <input name="parents[]" value="" style="margin: 5px;" type="text" /><br /> 
<div class="error-message-parents"></div> 
Personal message to teacher or staff member:<br /> 
<textarea name="pmes[]" cols="40" rows="3" maxlength="200"></textarea><br /> 
</div> 

</div> 

<input value="Order Now" type="submit" /> 

<script> 
function cloner() { 
    jQuery('#people').clone().appendTo('#mainForm').attr('class', 'people').removeAttr('id'); 
    jQuery('.people:last').children('input[name="person[]"]').val('').parent() 
         .children('input[name="student[]"]').val('').parent() 
         .children('input[name="school[]"]').val('').parent() 
         .children('input[name="parents[]"]').val(''); 
    jQuery('#mainForm').html(jQuery('#mainForm').html()); 
} 

function addInd() { 
    jQuery('#mytext').remove(); 

    cloner(); 
    cloner(); 

    jQuery('#mainForm').append('<div id="mytext">Need more? Add 2 more for $25 by clicking <a href="#" onclick="addInd(); return false;">here</a>.</div>'); 
} 

function threeCerts() { 
    while(jQuery('.people').length < 2) { 
    cloner(); 
    } 

    while(jQuery('.people').length > 2) { 
    jQuery('.people:last').remove(); 
    } 

    jQuery('#mytext').remove(); 
} 

function fiveCerts() { 
    while(jQuery('.people').length < 4) { 
    cloner(); 
    } 

    while(jQuery('.people').length > 4) { 
    jQuery('.people:last').remove(); 
    } 

    jQuery('#mytext').remove(); 
    jQuery('#mainForm').append('<div id="mytext">Need more? Add 2 more for $25 by clicking <a href="#" onclick="addInd(); return false;">here</a>.</div>'); 
    jQuery('.people:last div').css('display', 'block'); 
} 

function oneCert() { 
    if(jQuery('.people').length > 1) { 
    jQuery('.people').each(function(index) { 
     this.remove(); 
    }); 
    } 

    jQuery('#mytext').remove(); 
} 

</script> 

正如你可以看到我已经试图使IE注意使用html()命令从自身innerHTML改变自身的DOM刷新，但没有按也不行。这个技巧让我能够让IE7工作，但IE 9和8仍然不会接受动态添加或者在这种情况下克隆的字段。

我也试过将html()调用从DIV ID更改为表单ID，但仍然没有去。

我也试着在按钮的onSubmit上调用alert()，并且还试图调用cloner()函数，认为这可能会强制IE刷新DOM。但也是行不通的。

总是在IE 8和9返回的数组是：

Array ([type] => 3 [person] => Array ([0] =>) [school] => Array ([0] =>) [student] => Array ([0] =>) [parents] => Array ([0] =>) [pmes] => Array ([0] =>) [04a9ffd12221f8353baf957d190ee2e6] => 1) 

不管我选择，从理论上讲，如果我选择选项2或3，我应该得到更多的每个阵列中，它在IE工作正常7和Chrome，Opera，FF等。

Answer 1

经过大量来回的JS代码和添加新的元素，然后重新做innerHTML我发现我认为有唯一的解决方案。似乎这个问题继续，无论我在IE 7到9中做了什么。但修复它只能使用JS中动态创建的新表单，然后将新创建的表单附加到主体，然后提交。不确定在Windows 8中的IE浏览器，还没有得到那么多的测试，但也应该在那里工作。

一种黑客完成它，不喜欢一个完全动态的隐藏形式，但它似乎在上述IE中完美地工作。

首先使用JS获得IE版本，并存储到一个变量：

var ie = (function(){ 

    var undef, 
     v = 3, 
     div = document.createElement('div'), 
     all = div.getElementsByTagName('i'); 

    while (
     div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', 
     all[0] 
    ); 

    return v > 4 ? v : undef; 

}()); 

然后我们需要在整个形式itterate和克隆的每个元素到我们的新创建的窗体然后附加：

function subber() { 
    if(ie >= 7) { 
     var postto = jQuery('#chronoform_PATS').attr("action"); 
     var form = document.createElement("form") 
     jQuery(form).attr("id", "patsform").attr("name", "patsform").attr("action", postto).attr("method", "post"); 

     jQuery('input:text').each(function() { 
      jQuery(form).append(jQuery(this).clone()); 
     }); 

     jQuery('textarea').each(function() { 
      jQuery(form).append(jQuery(this).clone()); 
     }); 

     jQuery('input:radio').each(function() { 
      jQuery(form).append(jQuery(this).clone()); 
     }); 

     document.body.appendChild(form); 
     form.submit(); 
     document.body.removeChild(form); 

     return false; 
    } else { jQuery('#chronoform_PATS').submit(); } 
} 

当然，如果你不在IE浏览器内，它只是提交，其他方式创建新的表单，然后克隆找到的所有元素，附加然后提交。最后，它删除该表单并返回false以防止提交前一个表单。

按钮元素如下：

<input value="Order Now" type="submit" onclick="subber(); return false;" />