JavaScript を使った登録フォーム

久々に時間が取れたので、学習。
今日は、会社で課題になっている JavScript を使った登録フォームについて。

誰かがずっと以前に作って、メンテもろくにされていないWebページを昨年あｋら、少しづつ修正して、仕事に使っている。
昨年の反省から、３台固定の登録フォームを、１から２０台程度の台数可変な登録フォームに変更する予定でいる。
簡単に可変にする、といっても今回は、JavaScript を使って、ボタンを押すと、HTMLを自動生成させ、登録台数を変更できるようにしようと思っている。
一応、似たようなコードを以前確認済みなので、これを応用する予定。

ということで、作業開始。
登録用の基本フォームと、これの確認用画面を作る。
その後、登録用フォームに、JavaScript を貼り付ける。
貼り付けた JavaScript が予定どおりに動作してくれればOK。
最初のフォームにちょっとてこずったので、思ったより時間がかかったものの、試作は完了。

下記が試作データ。
−−−−−ここから

//

//

//

function bunkatsu_kirikae() {

  var tbody_obj = document.getElementById("tbody_tag");

  // var now_targets = tbody_obj.childNodes.length -2;

  var now_targets  = document.getElementById("selected_no").value;

  var new_targets = document.getElementById("new_targets").selectedIndex + 1;
  /* Delete line loop */

  for(i=1; iを追加

  tr_tag.appendChild(td_tag1); // trタグに、tdタグを追加

  tr_tag.appendChild(td_tag2); // trタグに、tdタグを追加

  tr_tag.appendChild(td_tag3); // trタグに、tdタグを追加

  tr_tag.appendChild(td_tag4); // trタグに、tdタグを追加

  td_tag1.appendChild(input_tag1);

  td_tag1.appendChild(button_tag1);

  button_tag1.innerHTML = "CHK";

  td_tag2.appendChild(input_tag2);

  input_tag2.innerHTML = "デスクトップＰＣノートＰＣ< /option>その他";
  td_tag3.appendChild(input_tag3);
  td_tag4.appendChild(input_tag4);

}

この JavaScript をボタンでクリックした際に動作するように、後は、変更する行数と、今の行数を格納する領域を設定しておけばOK。 こんなのでも行数の変更は、問題なくできました。 後は、他のWebシステムのフォームに応用できないか、ちょっと試してみる予定。 これが初期画面。エントリーが３台。 こっちが、エントリー台数を変更した時点の画面。 変更後は、エントリーが５台。 他に、「SELECT」子画面も作成済み。 ただし、ＰＣの「CHK」ボタンは、まだ、作成してない。 これは、管理番号が、ＤＢに登録されているかを確認する機能を割り当てる予定。 ＜input＞タグのname変数を、配列で次に受け渡すので、このタグを指定するのに、id属性を使う予定。 子画面からは、 document.getElementById(ID名).value = 何かという記述で、JavaScript 側からＨＴＭＬを修正する。 今日は、これくらい。