フォームコントロールの数を取得

フォームコントロールの数を取得する方法

フォームコントロールの数は、lengthプロパティで取得できます。

<form name="form1">
<input type="button" id="test1" value="実行">
</form>

<script>
function func1() {
  let y = document.form1.length;
}
const x = document.querySelector("#test1");
x.addEventListener("click",func1);
</script>

上記は、フォームコントロールの数がinput要素1つだけです。このため、変数yに1が代入されます。

フォームコントロールの数を利用して値を取得する方法

以下は、document.form1.elements[i].valueを使って、複数のフォームコントロールの値を取得する例です。

<form name="form1">
<input type="text">
<textarea></textarea>
<input type="button" id="test1" value="実行">
</form>

<script>
function func1() {
  let y = new Array();
  for ( let i = 0 ; i < document.form1.length ; i++ ) {
    y[i] = document.form1.elements[i].value;
  }
}
const x = document.querySelector("#test1");
x.addEventListener("click",func1);
</script>

document.form1.lengthによりフォームコントロールの数を取得して、for文でその数繰り返しています。

変数yは、配列です。このため、y[0]にテキストボックスの値、y[1]にテキストエリアの値、y[2]にボタンの値(実行)が代入されます。