• ベストアンサー

プロパティ名に変数を連結する

javascriptによるWebサイト内のフォーム内容入力チェックを行っています。 <input type="text" name="text1"> <input type="text" name="text2"> <input type="text" name="text3"> . . というように連番で付けられたフォーム部品があった場合 if(document.myForm.text1.value==""){flag=1;} if(document.myForm.text2.value==""){flag=1;} if(document.myForm.text3.value==""){flag=1;} のようにしてやれば空欄チェックが行えますが これがいくつもある場合、textの後に続く番号をfor等で 繰り返し処理によって行う場合、どのように記述するでしょうか。 試しに for(i = 0 ; i <= 100 ;i++){ var text; hoge = "document.myForm.text" + i + ".value"; if(hoge == ""){flag=1;} } のようにしましたが、この方法だとhoge自体が文字列として みなされてしまいプロパティの指定ができなくなっている(?)のでしょうか。 ご助言いただけると助かります。

  • SOU48
  • お礼率35% (51/144)

質問者が選んだベストアンサー

  • ベストアンサー
  • Werner
  • ベストアンサー率53% (395/735)
回答No.1

文字列を式として評価したいのならevalを使います。  if(eval(hoge) == "") しかし、この場合なら以下のようにしても良いと思います。  hoge = document.myForm["text" + i].value; ( form.text と form["text"] は同じ。)

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

こういう場合はフォームの要素をすべて拾って、 nameやvalueを検査するのが有効です var f=document.myForm; for(i = 0 ; i < f.length ;i++){ if(f[i].name=="text"+i && f[i].value == ""){flag=1;} }

関連するQ&A

  • JavaScriptでの変数で数値を使った場合の疑問

    JavaScriptでの変数で数値を使った場合の疑問 <form action="sample.cgi" name="fm"> <button onclick="allInput()">全入力</button> <input size="10" type="text" name="hoge1" value=""> <input size="10" type="text" name="hoge2" value=""> <input size="10" type="text" name="hoge3" value=""> ・・・・ <input size="10" type="text" name="hoge30" value=""> </form> 上記のようなフォームがあったとします。 hoge1~hoge30まであるためにうけとる方法をforで受け取りたいのです。 <script Language="JavaScript"> function allInput() { for ( var i = 1; i <=30; i++ ) { document.fm.hoge+i.value = document.fm.hoge1.value; //上のiのところで1から30を文字列としたい } } </script> 内部的には document.fm.hoge2.value = document.fm.hoge1.value; document.fm.hoge3.value = document.fm.hoge1.value; document.fm.hoge4.value = document.fm.hoge1.value; ・・・ document.fm.hoge30.value = document.fm.hoge1.value; のようになっていきばいいのですが・・・ たとえになるかわかりませんが、Perlだと下のように$iの変数を文字列として扱えるのですが・・・ for ($i=1;$i <= 30; $i++){ ${"sample$i"} = param("hoge$i"); } よろしくお願いいたします。

  • JavaScriptが参照する要素名が配列の場合は?

    下記に示すようなリンクをクリックすると入力欄に入力されるjavascriptを作っているのですが、inputのname属性が配列になっているとうまく参照してくれません。 フォームの生成や送信内容の処理が配列だと都合がよく、なんとかできないかと悩んでいます。html側の要素名を変えずにjavascriptに参照させる方法はないでしょうか。 うまくいく場合の抜粋 function f1(VALUE){ if(!document.MyForm.str1.value){ document.MyForm.str1.value = VALUE; } } <input name="str1" type="text" /> <a href="javascript:f1('単語');">単語</a> うまくいかない場合の抜粋 function f2(VALUE){ if(!document.MyForm.str[1].value){ document.MyForm.str[1].value = VALUE; } } <input name="str[1]" type="text" /> <a href="javascript:f2('単語');">単語</a>

  • for文の中での計算

    テキストボックス「原価」の値とテキストボックス「割引1~3」に入力された値をもとに テキストボックス「値段1~3」を計算するJavaScriptを作成しているのですが、 計算した値を「値段1~3」に入れようとするところでエラーが起きてしまいます。 ”i”をループカウンタとし、その値を名前にプラスしているのですが、 → XXXX+i この書き方が違うのでしょうか? 試しに、XXXX(i) や XXXX[i] でやってみましたが、うまくいきませんでした。 どのように書いたらよいのでしょうか? よろしくお願いいたします。 ************************************ <SCRIPT LANGUAGE="JavaScript"> function PriceKeisan() { var genka genka = document.myFORM.原価+i.value; var waribiki for (i=1; i<=3; i++){ waribiki= document.myFORM.割引+i.value; document.myFORM.値段+i.value = genka * waribiki / 100; ←ここでエラー } } </SCRIPT> <FORM NAME="myFORM"> <INPUT TYPE="TEXT" NAME="原価"> <INPUT TYPE="TEXT" NAME="割引1"><INPUT TYPE="TEXT" NAME="値段1"> <INPUT TYPE="TEXT" NAME="割引2"><INPUT TYPE="TEXT" NAME="値段2"> <INPUT TYPE="TEXT" NAME="割引3"><INPUT TYPE="TEXT" NAME="値段3"> <INPUT TYPE="BUTTON" onClick="PriceKeisan()" VALUE="計算"> ※説明しやすいようにテキストボックスの名前に日本語を使用しています。実際には日本語は使用しておりません。

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

    下記のような配列のフォームでボタンを押したらテキストフォールドの値を空にしたいのですがどのように記述したらいいのでしょうか? ご教授宜しくお願いします。 <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[値]があるとどうもうまくいきません。 宜しくお願いします。

  • ループで連続したフォームの値を読み込む

    こんにちは ループで苦労しています。 nameが数字で連続したフォームがいくつかあり、それをループで読み取りたいのです。私が作ったものは以下のものです。でもエラーになります。どこが悪いのかどなたかご教授ください。 <script> function ggo(){ for (i=1; i<=3; i++){ document.write(document.forms["myFORM"].elements["k"+i].value); }} </script> <form name="myForm"> <input type="text" name="k0"><br> <input type="text" name="k1"><br> <input type="text" name="k2"><br> <input type="button" value="hai" onClick="ggo()"> </form> それから、余談ですが以下のスクリプトはループを1回にするとkipをエラー無しで読み込んでくれますが、2回以上にするとエラー表示とともに1度しか読み込んでくれませんなぜなのでしょうか?ひとつの書き込みにに1つの質問が原則なのでこちらの質問に答えていただける方がいらっしゃればそれもとてもありがたいです。欲張ってすいません。 <script> function ggo(){ for (i=0; i<=2; i++){ document.write(document.myForm.kip.value); } } </script> <form name="myForm"> <input type="text" name="kip"><br> <input type="button" value="hai" onClick="ggo()"> </form> ↓参照しました↓ http://oshiete1.goo.ne.jp/qa820843.html

  • JavaScript文字列連携に関して

    質問させて頂きます。 下記のようなテキストフォームがあったとして、submit押された時に、jsを走らせ、テキストに数値以外が入っていないかチェックしたいと考えています。 ------------------------------------------------- <input type="text" name="text_1" /> <input type="text" name="text_2" /> <input type="text" name="text_3" /> ------------------------------------------------- チェック自体は下記のような記述で行うことが出来ました。 ------------------------------------------------- if(document.form1.text_1.value.match(/[^0-9]+/)){ //文字です } if(document.form1.text_2.value.match(/[^0-9]+/)){ //文字です } if(document.form1.text_3.value.match(/[^0-9]+/)){ //文字です } ------------------------------------------------- ですが、同じif文を並べて記述したくなかったので、for文を使って記述したいと考えました。 ------------------------------------------------- for (var i=1 ; i<=3 ; i++){ if(document.form1.text_1.value.match(/[^0-9]+/)){ //文字です } } ------------------------------------------------- この時、if文内のtext_1をどのように記述すれば、text_1,text_2,text_3と変化させることが出来るでしょうか。 ※「text_ + i +」等試してみましたが、正常に動作出来ませんでした。 ご存知の方がいらっしゃいましたら、ご教授頂けると助かります。 また、質問の内容に不備な点があるかもしませんが、その際はご指摘頂けると幸いです。 よろしくお願いいたします。

  • 半角英数字の判別

    お世話になります テキストフィールドにおいて半角英数字のチェックをしたいのですが・・・ 例えば『012ab』のような場合、 <script Language="JavaScript"> <!-- function checkText() { txt = document.myFORM.moto.value; if (txt.match(/[^a-z|^A-Z]/g)) alert("アルファベット以外が含まれてます"); } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkText()"> </form> では数字が入力されてるとalertされます function checkNum() { txt = document.myFORM.moto.value; for (i=0; i<txt.length; i++) { c = txt.charAt(i); if ("0123456789".indexOf(c,0) < 0) { alert("数値以外が含まれてます"); return; } } } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkNum()"> </form> ではアルファベットがあるとalertされてしまいます この2つをどのように組み合わせれば半角英数字以外であればalertされるようになるのでしょうか?

  • 背景色を変えて未入力チェックをしたいのですが。。。

    アンケートのフォームを作っています。記入項目が多いので未入力項目の背景色を変えてチェックしたいのですがうまくいきません。 フォームの中には ・テキストボックス ・ラジオボタン ・チェックボックス があり未入力の項目について背景色を変更してます。いろいろ試してみてなんとかテキストボックスとチェックボックスの背景色は変えることができたのですがラジオボタンの背景色が変えられません。 製作途中でうまく作動しませんがイメージを載せておきますのでなんとかお願いします。 <HTML> <HEAD> <TITLE>フォーム内容の入力チェック</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- .white { BACKGROUND-COLOR: white; font-color: black } --> </STYLE> <SCRIPT language="JavaScript"> <!-- // 入力チェック function checkForm(){ cForm = document.myFORM; total = cForm.elements.length; flag = false; for (i=0; i<total; i++) { cForm.elements[i].style.backgroundColor = "#FFFFFF"; if (cForm.elements[i].value == "") { cForm.elements[i].style.backgroundColor = "#FF8080"; flag = true; } } flag = BgChange(); if (flag == true){ alert("入力漏れがあるみたいよ"); } return flag; { alert("登録します、お疲れ様でした。"); } return flag; } //チェックボックス <!-- var DefaultColorCheckbox = "#FFFFFF"; //初期状態 var ChangedColorCheckbox = "#FF8080"; //変更後 function BgChange(){ for(i=0; i<document.myFORM.chk.length; i++){ if(document.myFORM.chk[i].checked){ document.myFORM.chk[i].style.backgroundColor = DefaultColorCheckbox; } else{ document.myFORM.chk[i].style.backgroundColor = ChangedColorCheckbox; } } } // --> </SCRIPT> <META content="IBM WebSphere Studio Homepage Builder Version 11.0.2.1 Trial for Windows" name="GENERATOR"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <DIV align="center"></DIV> フォーム内容の入力チェック&ハイライト<BR> <FORM name="myFORM" method="post"> <TABLE border="1" cellpadding="5"> <TBODY> <TR> <TD>住所:<INPUT class="white" name="Address"><BR> 氏名:<INPUT class="white" name="yourName"><BR> 年齢:<INPUT class="white" name="yourAge"></TD> </TR> <TR> <TD id="aaa">電話 <INPUT type="radio" name="電話" value="1">携帯<INPUT type="radio" name="電話" value="2">公衆電話</TD> </TR> <TR> <TD>容器 <INPUT type="radio" name="容器" value="1">ビン <INPUT type="radio" name="容器" value="2">ペットボトル</TD> </TR> <TR> <TD><INPUT type="checkbox" name="chk" value="3">火災保険<BR> <INPUT type="checkbox" name="chk" value="4">生命保険<BR> <INPUT type="checkbox" name="chk" value="5">地震保険</TD> </TR> <TR> <TD align="center"><INPUT type="button" value="登録" onclick="checkForm()"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>

  • 背景色を変えて未入力チェックをしたいのですが。。。

    アンケートのフォームを作っています。記入項目が多いので未入力項目の背景色を変えてチェックしたいのですがうまくいきません。 フォームの中には ・テキストボックス ・ラジオボタン ・チェックボックス があり未入力の項目について背景色を変更してます。いろいろ試してみてなんとかテキストボックスとチェックボックスの背景色は変えることができたのですがラジオボタンの背景色が変えられません。 製作途中でうまく作動しませんがイメージを載せておきますのでなんとかお願いします。 <HTML> <HEAD> <TITLE>フォーム内容の入力チェック</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- .white { BACKGROUND-COLOR: white; font-color: black } --> </STYLE> <SCRIPT language="JavaScript"> <!-- // 入力チェック function checkForm(){ cForm = document.myFORM; total = cForm.elements.length; flag = false; for (i=0; i<total; i++) { cForm.elements[i].style.backgroundColor = "#FFFFFF"; if (cForm.elements[i].value == "") { cForm.elements[i].style.backgroundColor = "#FF8080"; flag = true; } } flag = BgChange(); if (flag == true){ alert("入力漏れがあるみたいよ"); } return flag; { alert("登録します、お疲れ様でした。"); } return flag; } //チェックボックス <!-- var DefaultColorCheckbox = "#FFFFFF"; //初期状態 var ChangedColorCheckbox = "#FF8080"; //変更後 function BgChange(){ for(i=0; i<document.myFORM.chk.length; i++){ if(document.myFORM.chk[i].checked){ document.myFORM.chk[i].style.backgroundColor = DefaultColorCheckbox; } else{ document.myFORM.chk[i].style.backgroundColor = ChangedColorCheckbox; } } } // --> </SCRIPT> <META content="IBM WebSphere Studio Homepage Builder Version 11.0.2.1 Trial for Windows" name="GENERATOR"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <DIV align="center"></DIV> フォーム内容の入力チェック&ハイライト<BR> <FORM name="myFORM" action="mailto***:@*.ne.jp" method="post"> <TABLE border="1" cellpadding="5"> <TBODY> <TR> <TD>住所:<INPUT class="white" name="Address"><BR> 氏名:<INPUT class="white" name="yourName"><BR> 年齢:<INPUT class="white" name="yourAge"></TD> </TR> <TR> <TD id="aaa">電話 <INPUT type="radio" name="電話" value="1">携帯<INPUT type="radio" name="電話" value="2">公衆電話</TD> </TR> <TR> <TD>容器 <INPUT type="radio" name="容器" value="1">ビン <INPUT type="radio" name="容器" value="2">ペットボトル</TD> </TR> <TR> <TD><INPUT type="checkbox" name="chk" value="3">火災保険<BR> <INPUT type="checkbox" name="chk" value="4">生命保険<BR> <INPUT type="checkbox" name="chk" value="5">地震保険</TD> </TR> <TR> <TD align="center"><INPUT type="button" value="登録" onclick="checkForm()"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>

  • for文の使い方について

    こんばんはpiyottiと申します。 forループを使用してtextの値を取得したいと思っています。 「document.myFORM.namei・・・」の「i」をループカウンターとして 「name1、name2・・・」と増やしていきたいのですがうまくいきません。 どうかよろしくお願いいたします。 <script Language="JavaScript"><!-- function calc(form) { n = 0; for (i=0; i<4; i= i+;) n += eval(document.myFORM.namei.value); } // --></script> <form name="myFORM"> 数値1:<input type="text" onChange="calc(this.form, this)" name="name1"> 数値2:<input type="text" onChange="calc(this.form, this) name="name2"> 数値3:<input type="text" onChange="calc(this.form, this) name="name3"> 数値4:<input type="text" onChange="calc(this.form, this) name="name4"><br> </form>

専門家に質問してみよう