下記のようにフォームによって入力される値を、javascriptで数値かどうかチェックし、なおかつ和を求めたいのですが、

値へのアクセスの仕方がどうしてもわかりません。どなたかご教授願えませんでしょうか。
なお、input要素の数、配列barのキーとなる数値は動的に変わります。よろしくお願い致します。

<form action="foo.html" method="post" name="form1">
<input type="text" name="bar[3]" value="" />
<input type="text" name="bar[10]" value="" />
<input type="text" name="bar[47]" value="" />
<input type="text" name="bar[53]" value="" />
<input type="submit" value="send" />
</form>

回答の条件
  • 1人2回まで
  • 登録:2006/05/30 19:04:36
  • 終了:2006/05/30 21:38:27

回答(3件)

id:sera_yr No.1

sera_yr回答回数123ベストアンサー獲得回数62006/05/30 20:32:52

ポイント25pt

http://www.res-system.com/weblog/item/112

値の参照の仕方はこちらが参考になると思います。

var sum;

と、和を入れる変数を定義しておき、input要素同様以下のJavascriptを動的に生成すればよいかと思いますがいかがでしょうか。

if( !isNaN( form1.elements['bar[3]'].value )

sum += form1.elements['bar[3]'].value;

isNaNについてはこちらに説明があります。

http://634.ayumu-baby.com/javascript/js_numcheck_normal.html

id:kohei_april20

ありがとうございます。

なるほど。javascript自体を動的に生成してしまえば確かに可能ですね!

2006/05/30 20:40:45
id:yo-kun No.2

yo-kun回答回数220ベストアンサー獲得回数302006/05/30 20:54:02

ポイント15pt

form1内の要素はelementsで取得できますので、常に

テキストボックス

テキストボックス

送信ボタン

であれば

document.form1.elements.length - 1

でテキストボックスの要素数を取得できます。

sera_yr様も記述している通りisNaNで数字かどうかは判断できます。

以下にサンプルを示します。


スクリプト部分

<script language="JavaScript">
<!--
function sample() {
  var sum = 0 ;
  var eachValue;
  var success = true;
  var inputNum = document.form1.elements.length - 1;
  for ( i = 0 ; i < inputNum ; ++i) {
    eachValue = parseInt(document.form1.elements[i].value);
    if (isNaN(eachValue)) {
      success = false;
      break;
    }
    else {
      sum += parseInt(document.form1.elements[i].value);
    }
  }
  if (success) alert(sum);
  else {
    alert("数字でないものがあります");
    return false;
  }
  return true;
}
//-->
</script>

フォーム部分

<body>
<form action="foo.html" method="post" name="form1">
<input type="text" name="bar[3]" value="" />
<input type="text" name="bar[10]" value="" />
<input type="text" name="bar[47]" value="" />
<input type="text" name="bar[53]" value="" />
<input type="submit" value="send" onclick="return sample()" />
</form> 

なお、onclickイベントに"return イベントハンドラ"と記述し、このイベントハンドラがfalseを返すと、本来のsubmitの動作は機能しなくなりますので便利です。

http://www.tohoho-web.com/js/onevent.htm

id:kohei_april20

ありがとうございます。

ただ、省略してしまいましたが、フォームはbar意外の要素も他に持つので上記のものでは難しそうです。

2006/05/30 21:27:34
id:dungeon-master No.3

dungeon-master回答回数571ベストアンサー獲得回数402006/05/30 20:58:04

ポイント40pt

こういうケースでは elements[]配列とelements.lengthを使ってループしてください。


function check(){
  var stat=true;
  var c=0;
  for( i=0; i < form1.elements.length ; i++ ){
    if( form1.elements[i].name.substr(0,3)=="bar" ){
       if( isNaN( form1.elements[i].value ) ) stat=false;
       c = c+ 1*form1.elements[i].value ;
    }
  }
  form1.btn.value = c;
  return stat;
}

というような関数をHead部にJavascriptで用意しておき、Submitボタンに

name="btn" onClick="return check();"

を追加します。

SubmitボタンのValueに答えを突っ込んでますが、専用のhiddenフィールドを

設けた方が良いでしょう。

空欄のチェックは別途行ってください。

name="btn" onClick="check();return false;"

とすると、Submitはキャンセルされるので、Submitボタンに表示される

計算結果を確認できます。

id:kohei_april20

ありがとうございます。

substrを使うんですね。動的にスクリプトを生成する必要もなく、これが一番スマートそうです!

(多少無理矢理感はありますが・・仕方なさそうですね)

2006/05/30 21:36:46
  • id:vector_xenon
    もしかしたら
    c = eval(c.toString() + "+" + form1.elements[i].value.toString());
    としないとうまく計算できないかもしれません。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません