【javascript】form内の複数のtextの数字をリアルタイムに加算して合計を求める

form内の複数要素の値を加算する。リアルタイムで処理するのでJavascript。

※input type="number"にするのはバリデーション的には楽だけど、html5対応でないとtextと同様になる

まずはバリデーション

function numkey_down(get_code){
	//数字のみを入力させる
	if(
		get_code >= 48 && get_code <= 57 //数字キー
		|| get_code >= 96 && get_code <= 105 //テンキーの数字
		|| get_code == 8 //bs
		|| get_code == 46 //Delete
	)
		return true;
	else
		return false;
}

formの方は

<input type="text" name="goal" size="20" value="" onkeydown="return numkey_down(event.keyCode)">

強制的にキー入力をさせない。

ついでに

onkeyup="calcsum(this.form)"

としておき、

function calcsum(f) {
//合計値を求めてsumareaにセットする
	var sum =0;
	//sumarea以外で、input typeがtextのみを加算する
	for(var i=0;i<f.length;i++){
		if(f[i].type=="text" && f[i].value.match(/^\d+$/) && f[i].name != 'sumarea') sum+=parseFloat(f[i].value)
	}
	f.sumarea.value = sum;
	sum=0;
}

とする。合計値用のformは

<input type="text" name="sumarea" size="20" >

とする。