JavaScript DOM学習第七章フォームの拡張

の意見を打診
オンラインのCD格付けツールがあるとします.ユーザーが好きなCDをすべて表示することを望んでいます.しかし、どうしてユーザーが平均何枚見ているか知っていますか?このページにどのくらいのフィールドを追加する必要がありますか?
W 3 CDOMが現れる前にこれは確かに問題です.CDを7枚置いたとします.しかし、ユーザーは1枚しか見たくない可能性が高く、多くはユーザーを驚かす可能性がありますが、一部のユーザーは自分のすべてのCDを見たいと思っています.そうすれば、何度も繰り返し提出しなければなりません.これは確かにうるさい.
W 3 C DOMを使用してこそ、ユーザーにどのフィールドを生成するかを決定させることができます.この効果は以前とは大きく違います.
例
送信をクリックすると、フォームは得られたすべてのパラメータを配列形式で送信します.これは、本当にサーバ側に送信されたかどうかを確認するために使用されます.残念なことに、mac版のIEとSafariは送信できません.
IEの質問
Windowsの下のIEには2つの深刻な問題があります.
最初の問題は、生成されたすべてのラジオボックスが同じ配列に属していることです.namesが異なる場合でも.これにより、ユーザーはすべてのラジオボックスで1つしか選択できません.つまり、生成されたフォームでラジオボックスを使用することはできません.
innerHTMLで生成されたラジオボックスは問題ないという読者がいます.ラジオボックスを実用化しなければならない場合は、試してみてください.
2つ目の問題は、生成されたフォームが従来のdocumentを通過することである.formsはアクセスできません:IEは配列に含まれていません.これは彼らにIDを設定することで解決できる.
説明する
フォームのHTMLコード:

 
  
 
  
            onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />

 
  
     
  
     
          Rating 
          Excellent 
          Good 
          OK 
          Poor 
          Bad 
      

 
  
    Short review 
  
    
Radio buttons included to test them in Explorer:
 
  
    Test 1
 
  
    Test 2 
  
 
  
 
  
     
  
     
  
     
  
 
  
 
 

本物のフォームアイテムは、IDがreadrootのDIVで、display値がnoneです.このDIVはテンプレートで、ユーザーは修正できません.ユーザーがより多くのフォームを必要とする場合は、このテンプレートをコピーしてフォームの後に追加します.最初からロードして、ユーザーがページを開くと表示されます.
このDIVはフォームの外にあるので,ユーザがフォームをコミットすると,このテンプレートの内容はコミットされない.
IDがwriterootのSPANはタグです.新しい生成されたフォームが彼の前に挿入されます.
フォームアイテムの追加
次のコードは、フォーム・アイテムを追加するために必要なときに使用できます.

 
  
var counter = 0; 
  
function moreFields() { 
  
    counter++; 
  
    var newFields = document.getElementById('readroot').cloneNode(true); 
  
    newFields.id = ''; 
  
    newFields.style.display = 'block'; 
  
    var newField = newFields.childNodes; 
  
    for (var i=0;i        var theName = newField[i].name 
  
        if (theName) 
  
            newField[i].name = theName + counter; 
  
    } 
  
    var insertHere = document.getElementById('writeroot'); 
  
    insertHere.parentNode.insertBefore(newFields,insertHere); 
  
} 
  
window.onload = moreFields; 
  
 
 

まず、すべてのフォーム・アイテムに一意の名前がある必要があるため、カウンタcounterが必要です.カウンタの値を生成nameの後に追加します.初期化カウンタ:

   var counter = 0; 
 

そして実際の関数です.カウンタに1を追加します.

 
  
function moreFields() { 
  
counter++; 
  
 
 

次にテンプレートをコピーし、IDを削除し、displayをblockに設定します.readrootはドキュメント全体に一意のIDであるべきで、テンプレートをコピーした後に表示してユーザーに見せるべきです.

 
  
var newFields = document.getElementById('readroot').cloneNode(true); 
  
newFields.id = ''; 
  
newFields.style.display = 'block'; 
  
 
 

このコピーのサブ要素を巡ります.

 
  
var newField = newFields.childNodes; 
  
for (var i=0;i 
 

サブエレメントにnameプロパティがある場合は、name値にカウンタの値を加えて、一意性を保証します.

 
  
var theName = newField[i].name 
  
if (theName) 
  
newField[i].name = theName + counter; 
  
} 
  
 
 

このコピーは挿入の準備ができています.私たちは彼をwriterootの前に挿入しました.

   var insertHere = document.getElementById('writeroot'); 
  
insertHere.parentNode.insertBefore(newFields,insertHere); 
  
} 
  
 
 

次に、ページのロード時に1回実行します.これにより、ユーザーが入ったときに表示されます.

   window.onload = moreFields; 
 

フォームアイテムの削除
各テンプレートのコピーには、削除ボタンがあります.

   onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /> 
  
 
 

このボタンをクリックすると、親要素(DIV)が削除されます.生成されたフォーム全体が消え、二度と現れません.
翻訳先:http://www.quirksmode.org/dom/domform.html
転載は以下の情報を保持してください
作者:北玉(tw:@rehawk)