人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

下記のようにフォームによって入力される値を、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>

●質問者: kohei_april20
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:BAR JavaScript アクセス 入力 教授
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● sera_yr
●25ポイント

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

◎質問者からの返答

ありがとうございます。

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


2 ● yo-kun
●15ポイント

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

◎質問者からの返答

ありがとうございます。

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


3 ● dungeon-master
●40ポイント

こういうケースでは 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ボタンに表示される

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

◎質問者からの返答

ありがとうございます。

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ