JavaScript Part5

JavaScriptで入力欄追加・削除

JavaScriptでJavaScriptで入力欄追加・削除する方法について記述します。
入力欄追加・削除するには、JavaScriptのinnerHTMLを使用します。
詳細は、とほほのWWW入門のエレメント（Element）のページをご覧ください。

とほほのWWW入門のエレメント（Element）

以下は、サンプルです。

サンプル

ポイント

入力欄の1行目は削除できません。エラーが表示されます。
入力欄は、すべて必須項目となります。
ＯＫボタンをクリックすると、入力欄は入力チェックされます。
入力チェック後エラーがなければ、入力欄に入力された値を表示します。

サンプルソース

<html charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<head>
<title>JavaScriptサンプル5</title>
<style>
body {
background-color: white;
}
</style>
<script>
var InputSeq = 0;

function InputAdd(){
  InputNowSeq = InputSeq;
  InputSeq++;
  InputBuf = "入力欄" + InputSeq;
  InputBuf += " ";
  InputBuf += "<input type='text' name='Input" + InputSeq + "'>";
  InputBuf += "<br>";
  InputBuf += "<span id='InputSpan" + InputSeq + "'></span>";
  document.getElementById("InputSpan" + InputNowSeq).innerHTML = InputBuf;
}

function InputDel(){
  if (InputSeq == 0){
    alert("削除できません。");
    return;
  }
  InputSeq--;
  document.getElementById("InputSpan" + InputSeq).innerHTML = "";
}

function ok_func(){
  bufStr = "";
  i = 0;
  name = "Input";
  while (i => 0){
    domBuf = document.getElementsByName(name + i);
    if (domBuf.item(0) == undefined){
      break;
    }
    seqBuf = "";
    if (i > 0){
      seqBuf = i;
    }
    //入力チェック
    if (domBuf.item(0).value.length == 0){
      alert(
        "入力欄"
        + seqBuf
        + "を入力して下さい。");
      return;
    }
    bufStr += domBuf.item(0).value + "\n";
    i++;
  }
  //入力表示
  if (bufStr != ""){
    alert(bufStr);
  }
}

function reset_func(){
  document.form1.reset();
  InputSeq = 0;
  document.getElementById("InputSpan0").innerHTML = "";
}

</script>
</head>

<body>
<h2>入力欄追加・削除</h2>

<form name="form1">
入力欄   <input type="text" name="Input0">
<input type="button" value="追加" onclick="InputAdd();">
<input type="button" value="削除" onclick="InputDel();">
<br>
<span id="InputSpan0"></span>
<br>

<input type="button" value="ＯＫ" onclick="ok_func()"></a>
<input type="button" value="リセット" onclick="reset_func()">
</form>

</body>
</html>

以上