各フォームの要素を取得したい

Question

各要素のIDを取得したいのですがeditForm.elements[j];でエラーが発生します。
対処方法を教えてもらえないでしょうか？

<form name="edit_form">
   <input type="text" id="pulse_space_min" class="textbox Hop_textbox_width" tabindex="14"/>
   <input type="text" id="pulse_space_max" class="textbox Hop_textbox_width" tabindex="15"/>
</form>	
						

function startEditMode(screenMode) {

	//ページ読み込み時に有効/無効にしたい要素を設定する配列
	var targetElmAry = ["pulse_space_min", "pulse_space_max"];
	var len1 = document.edit_form.length;

	for (var i = 0; i < len1; i++) {
	    var editForm = document.edit_form[i];
	    var len2 = editForm.length;
	    for (var j = 0; j < len2; j++) {
	    	var elm = editForm.elements[j];//エラー
	    	switch(elm.type) {
	    		case "text" :
	    	
	    	 	case "checkbox" :
	    	 	
	    	}
	     }
	}
}

Comments

[m.ts10806]

タグにjQueryついていますがコードを見る限りjQueryは使わないということでしょうか。でしたらタグは外しておいたほうが良いと思います。

[m.ts10806]

また、startEditMode()を呼び出しているところの処理も記載してください。

[m.ts10806]

ちなみに、とりあえずvar len1以降だけで動かすと当該エラーは発生していません。

[x_x]

問題の発生する HTML もお願いします。少なくとも同名の form が複数あるかと思いますが

[penginkunkun]

var elm = document.edit_form[i];
var id = elm.getAttribute("id");

この方法で試してみたらエラーがでませんでしたありがとうございました。

Answer 1

名前をつけたformからinput要素を抜き出してそのidがほしいということでしょうか？

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll("[name=edit_form] input"),function(x){
    console.log(x.id);
  });
});
</script>
<form name="edit_form">
   <input type="text" id="pulse_space_min" class="textbox Hop_textbox_width" tabindex="14"/>
   <input type="text" id="pulse_space_max" class="textbox Hop_textbox_width" tabindex="15"/>
</form>    

Comments

[penginkunkun]

参考になります。回答ありがとうございました。

Answer 2

解決したのでソースを載せておきます。
各フォーム部品の要素はclassではなくidから参照するのを前提で汎用的に書いてみました。
皆さん回答ありがとうございました。

<form name="edit_form">
   <input type="text" id="pulse_space_min" class="textbox Hop_textbox_width" tabindex="14"/>
   <input type="text" id="pulse_space_max" class="textbox Hop_textbox_width" tabindex="15"/>
   <input type="text" id="xxx1_space_min" class="textbox Hop_textbox_width" tabindex="14"/>
   <input type="text" id="xxx1_space_max" class="textbox Hop_textbox_width" tabindex="15"/>
   <input type="text" id="xxx2_space_min" class="textbox Hop_textbox_width" tabindex="14"/>
   <input type="text" id="xxx2_space_max" class="textbox Hop_textbox_width" tabindex="15"/>
</form>    

"use strict";


$(document).ready(function() {

	//var screenMode = getSharedData("screenMode");
	var screenMode = 0;//テスト値(0 = パルススペース間隔以外のフォーム部品を無効、1＝パルススペース間隔のみ無効)

	startEditMode(screenMode);

});


//モードによって画面の表示切り替えを行う関数(特定の要素が有効であれば他の全ての要素を無効)
function startEditMode(screenMode) {

	//ページ読み込み時に有効/無効にしたい要素を設定する配列
	var targetElmAry = ["pulse_space_min", "pulse_space_max"];
	var targetBool = screenMode === 0 ? true : false;//モードによって切り替え
	var len = document.edit_form.length;

	for (var i = 0; i < len; i++) {
	    var elm = document.edit_form[i];
	    var id = elm.getAttribute("id");

	    switch(elm.type) {
			case "text" :
				elm.disabled = editJudgment(targetElmAry, id, targetBool); break;
		 	case "checkbox" :
		 		elm.disabled = editJudgment(targetElmAry, id, targetBool); break;
		 	case "select-one" :
		 		elm.disabled = editJudgment(targetElmAry, id, targetBool); break;
	    }
	}
}

//各フォームが有効か無効か判断 (ターゲットのフォーム要素名配列, 判定対象の要素名(id), ターゲットのフォーム要素を有効/無効かを判断する値)
function editJudgment(targetElmAry, elmId, targetBool) {
	var targetFlg = false;
	for (var i = 0; i < targetElmAry.length; i++) {
		var targetElmName = targetElmAry[i];

		targetFlg = (targetElmName === elmId);
		if (targetFlg) return targetBool;
	}

	//ターゲット要素では無い場合
	if (!targetFlg) return !targetBool;//ターゲット要素が有効であれば無効、無効であれば有効にする
}