0

我在 7、8 和 9 之后的 IE 中遇到问题都给我这个问题。但是 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()命令将 DOM 刷新innerHTML从自身更改为自身，但这也不起作用。这个html()技巧在让 IE7 工作时对我有用，但 IE 9 和 8 仍然不接受动态添加的字段，或者在这种情况下是克隆的字段。

我也尝试将html()呼叫从 DIV ID 更改为表单 ID，但仍然没有成功。

我还尝试在按钮和函数上调用 an alert()，onSubmit认为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 等中运行良好。

4

1 回答 1

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;

}());

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

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;" />
于 2013-03-07T13:22:36.733 回答