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>

正如你所看到的，我已经尝试使用html()命令让IE注意到DOM刷新，将innerHTML从自身更改为自身，但这也不起作用。这个html()技巧让我在使用IE7时起作用，但IE 9和8仍然不接受动态添加，或者在这种情况下克隆的字段到表单。

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

我还尝试在按钮的alert()上调用onSubmit，同时在cloner()函数上调用Array ( [type] => 3 [person] => Array ( [0] => ) [school] => Array ( [0] => ) [student] => Array ( [0] => ) [parents] => Array ( [0] => ) [pmes] => Array ( [0] => ) [04a9ffd12221f8353baf957d190ee2e6] => 1 )，认为这可能会迫使IE刷新DOM。但也行不通。

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

{{1}}

无论我选择什么，理论上如果我选择选项2或3，我应该在每个阵列中获得更多，它在IE 7和Chrome，Opera，FF等中都能正常工作。

Answer 1

经过很多来回JS代码并添加新元素然后重新执行innerHTML我找到了我认为唯一的解决方案。无论我在IE 7到9中做了什么，似乎这个问题仍然存在。但是修复它只能使用在JS中动态创建的新表单，然后在最后将新创建的表单附加到Body然后提交。不确定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;

}());

然后我们需要遍历整个表单并将每个元素克隆到我们新创建的表单中然后追加：

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;" />

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

1 个答案: