コントロール名の取得方法について

質問

いつもお世話になっております。

表題の件について早速ご質問なのですが、
例えば・・・
<form name="a">
<input type="text" name="txt01" value="no...1">
<input type="text" name="txt02" value="number2">
<input type="text" name="txt03" value="sono3">
<input type="text" name="txt04" value="その4">
<input type="text" name="txt05" value="これは5番目">
<input type="button" onClick="getControlValue(document.a)">
</form>
というフォームがあったとして
JavaScriptから
<script type="text/JavaScript">
function getControlValue(oForm) {
for (i=1;i<=5;i++) {
oControlName = i番目のコントロール; // 数字の2桁0埋め処理を使用
alert(oControlName.Name + "の値は" + oControlName.value + "です。");
}
return false;
}
</script>
というループの中で上記フォーム(txt**)のコントロールを取得して、その値を取得するには
どのような方法を取れば実現できるのでしょうか。

ご存知の方がいらっしゃいましたらお知恵をお借りできれば幸いに存じます。

よろしくおねがいいたします。

回答No.1

nuruhho44 · ベストアンサー

まず
onClick="getControlValue('a')">
としてから、

TXT = new Array;
function getControlValue(oForm) {
for (i=1; i<=5; i++) {
TXT[i] = document.forms[oForm].elements["txt0"+i].value;
}
}

とすれば、配列TXTの1～5にtxt01～txt05のvalue値が納まりますので、それを利用すれば如何かと。

お礼

ご回答いただきましてありがとうございました。

私のわからなかった不安が解消いたしました！
「elements["文字列"].value」
だったのですね…

txt**には01～12の文字が入ることが確定していたので
forでまわして
for (i=1; i<12; i++) {
sCtrlName = (i.toString().length == 1)?'0'+i:i;
sRet = alert(f.elements[sCtrlName].value);
}

としました。
# 10以上の数字もあったので、0を頭にくっつけるだけでは
# ちょっと足りなかったのです。。。

ご丁寧に解説いただきましてありがとうございました！！

回答No.3

noname#199778

JavaScriptでは、document.forms[formname].elements[x].nameでフォームに含まれる要素のname属性を参照できますので、それで条件にあった値を持つ要素に対してのみ処理を行うようにさせるのではいかがでしょうか。
下記に、質問文にあるソースで目指している動作をさせるスクリプトを書きます。

<script type="text/javascript"><!--
function getControlValue(oForm) {
x= oForm.elements.length;
for (i=0; i<oForm.elements.length ;i++) {
if (oForm.elements[i].name.match(/^txt\d{2}/)){
alert(oForm.elements[i].name + "の値は" + oForm.elements[i].value + "です。");
}
}
return false;
}
//--></script>

こうすると、対象のフォームに含まれる要素数だけループを回し、その要素ごとにname属性を正規表現マッチングし、条件に一致した時にのみ処理を行うようにできます。
ちょっと解説すると、

if (oForm.elements[i].name.match(/^txt\d{2}/)){

この部分で、name属性が先頭から「txt**」(**の部分は数字2桁)とマッチすれば以下の処理を行う、という条件分岐をしています。
なお、この場合は、name属性の先頭にtxt**があればヒットするので、txt01でもtxt04でも、txt13でもヒットします。 ただ、txt111など数値部分が3桁以上だったり、txt22bのように後に何かが続いていたとしても、すくってしまいます。 それが好ましくない場合は、条件式を

if (oForm.elements[i].name.match(/^txt\d{2}$/)){

このようにすると、name属性がtxt**で、かつその後に文字が続かない場合に、処理を行わせると言うように条件を絞ることができると思います。

参考になれば。

お礼

なるほど！
正規表現を利用した検索ロジックは私にない発想でしたので面白かったです。

今回はフォームにtextboxやselectbox、checkboxなど
複数ありましてチェックの対象を絞り込むことが
できそうでしたので、全Elementに対してチェックする必要がなかったのです（説明不足でしたね。。。すみません。)

結局「数字2桁0埋めフォーマット変換処理」は
sRet = ((i.toString().length == 1)?'0'+i:i);
とすることにいたしました。

大変ご丁寧が解説をいただきましてありがとうございました！！

回答No.2

spnk55

以下のようにテキストボックスの名前と値を
それぞれ配列に格納する方法はどうでしょうか?
関数に引数は使っていません。

function getControlValue() {
oControlName=new Array();
oControlNameValue=new Array();
total="";

for (i=0;i<a.elements.length-1;i++) {
oControlName[i] = "txt0"+(i+1);
oControlNameValue[i] = a.elements[i].value;
total+=oControlName[i] + "の値は" + oControlNameValue[i] + "です。\n";
}

alert(total);
return false;
}

お礼

なるほど、そういう手もありましたか！

しかし、この方法だとページ内の全Elementについて
判断してしまうので、今回は見送ることにいたしました。

しかし、elements[i]のロジックは使用することに
いたしました。

ご提供ありがとうございました！！