0

IEで7、8、9以降の問題が発生しました。どちらもこの問題を引き起こします。しかし、IE7と他のすべてのブラウザーは気づきません。

私のフォームでは、最初DIVに持っているものを動的に複製します。これにより、複製されたフィールドを持つ新しいdivが得られます。フィールドは、そのようなフィールド配列name="myfield[]"です。

IE 8および9で送信すると、配列に1つの要素のみが含まれていて、複製した多くの要素は含まれていないかのように返されます。

これは完全な形式の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が更新されたことをIEに通知させinnerHTMLて、それ自体からそれ自体に変更しようとしましたが、それも機能しません。このhtml()トリックはIE7を機能させるのに役立ちましたが、それでもIE 9および8は、フォームに動的に追加された、またはこの場合は複製されたフィールドを受け入れません。

html()また、呼び出しをDIVIDからFormIDに変更しようとしましたが、それでもうまくいきません。

また、ボタンと関数でを呼び出してみましalert()たが、これによりIEがDOMを更新する必要があるかもしれないと考えました。しかし、また機能しません。onSubmitcloner()

IE8および9で常に返される配列は次のとおりです。

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

何を選択しても、理論的にはオプション2または3を選択すると、各アレイでさらに多くを取得する必要があります。IE7、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 に答える