リセットさせるにはどうしたらいいでしょうか？

質問

下記のような配列のフォームでボタンを押したらテキストフォールドの値を空にしたいのですがどのように記述したらいいのでしょうか？
ご教授宜しくお願いします。

<form name="myform">
　<input type="text" name="no[100]" value="abc">
　<input type="text" name="no[102]" value="der">
　<input type="text" name="no[105]" value="ghi">
　　　　　　　　　　　.
　　　　　　　　　　　.
　　　　　　　　　　動的に増える
</form>

※
document.myform.elements["no[100]"].value = "";
みたいに書けば個別には空にすることは出来たのですが。
elementsの順番で空にすることがどうしてもうまくいきません。
document.myform.elements[0][0].value = "";みたいに。
document.myForm.elements['no[]'].lengthで個数を取得して順番に空にするってことがしたいのですが、<input type="text" name="no[]" value="abc">だったらうまくいくのかもしれないですけど、no[値]があるとどうもうまくいきません。
宜しくお願いします。

回答No.3

yambejp · ベストアンサー

こんな感じで、名前に法則性があるのでこんな感じでいけると思います

<script>
function clearText(f){
for(var i=0;i<f.length;i++){
if(f[i].name.match(/no\[[0-9]+\]/)) f[i].value="";
}
}
</script>

<form name="myform">
no.100<input type="text" name="no[100]" value="abc"><br>
no.102<input type="text" name="no[102]" value="der"><br>
no.105<input type="text" name="no[105]" value="ghi"><br>
dammy<input type="text" name="dammy" value="jkl"><br>

<input type="button" value="clear" onClick="clearText(this.form)">
</form>

お礼

ありがとうございました。
うまく出来ました。

回答No.2

atom_seed

jQueryを使うと簡単に操作できるようになります。

■jQueryの読み込み部分
<script type="text/javascript" src="jquery-1.2.3.min.js" charset="utf-8"></script>

■リセットボタンのアクション
function myclear() {
// ↓↓CSSの要領でタグを指定できます
$('input.clear').val('');
}

■以下HTMLでは、class属性を追加しています。
<form name="myform">
　<input type="text" name="no[100]" class="clear" value="abc">
　<input type="text" name="no[102]" class="clear" value="der">
　<input type="text" name="no[105]" class="clear" value="ghi">
　　　　　　　　　　　.
　　　　　　　　　　　.
　　　　　　　　　　動的に増える
<input type="button" value="リセット" onclick="myclear();">
</form>

参考URL：

http://jquery.com/

お礼

ありがとうございました。

補足

ありがとうございます。
jqueryですか。
早速試してみたところ、うまくいきました。
しかもソースが短い。いいですね～
ただprototype.jsをメインで使っていて現状どのページでもprototype.jsが読み込まれていて、firefoxだとprototype.jsとJQueryが読み込まれると止まりますね。

ちなみにprototype.jsでも出来ました。
var elements = document.getElementsByClassName('clear');
elements.each(
　function (item)
　{
　　item.value = "";
　}
);
jQueryのほうが楽ですね。

出来ればライブラリ系を使わずにしたいのですが・・・

回答No.1

redfox63

no[]の添え字の範囲がある程度予測可能なら

<sctipr type="text/javascript">
<!--
function myclear()
{
　　var n, s, obj, i;
　　// []内が 100から119までなら
　　for( n = 0; n < 20; n++ ) {
　　　　s = "no[" + (100+n) + "]";
　　　　obj = document.getElementsByName( s );
　　　　if ( obj.length != 0 ) {
　　　　　　// 該当するNameのオブジェクトがあった場合
　　　　　　for( i = 0; i < obj.length; i++ ) {
　　　　　　　　obj[i].value = "";
　　　　　　}
　　　　}
　　}
}
//-->
</script>
といったスクリプトを呼び出すようにしてやればよさそうですよ

お礼

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

補足

早朝からわざわざ頭使っていただいてありがとうございます。
>no[]の添え字の範囲がある程度予測可能なら
ってことなんですが、サンプルでは100とかで書きましたが実際は10000とかの大きい値です。テキストフォールドの数的には数十個程度なんですけど、no[値]の値は10001とか11001とか予測不可能です。(DBのユニーク値)
なのでelementsの要素順で要素の数だけループで回して空に出来ないかなって模索中なんですが…。