WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:JavaScriptのフォーム入力数値を複数計算式に当てたい

0:[投稿] 桜庭 [2005/09/05 16:38 ][環境:IE6 JavaScript]

フォームの二つに入力した数値を
4つの計算式にはめこみ、4つのフォームに出力したいのですが
色んなJavaScript関連のサイトを回ってみているものの
まったくもって分かりません…
計算式は下記の通りです
1の計算式: (a+b)/40-1
2の計算式: {(a÷2)+b}/40-1
3の計算式: (a+b+1)/46-1
4の計算式: {(a÷2)+b+1}46-1

形としては下記のようなものを望んでおります。

a____ ←aとbは数値入力してもらうフォーム
b____ 

計算する↓(ボタン)

結果1____ ←以下4つの計算式の答えが出るフォーム
結果2____
結果3____
結果4____

このような計算式で、この表示方法は可能でしょうか?


1:[回答] AK [2005/09/05 17:54 ]

桜庭さん、こんにちわ。
サンプル作ってみましたが、どうでしょうか。
4つの計算式が、これであってるのかどうか謎ですけど・・・。
長くなってゴメンなさい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script language="javascript">
function Cal()
{
    // 入力したデータAB
    inputValueA = document.calForm.a.value - 0;
    inputValueB = document.calForm.b.value - 0;

    // 4つの計算式
    ans1 = ( ( inputValueA + inputValueB ) / 40 - 1 );
    ans2 = ( ( ( inputValueA / 2 ) + inputValueB ) / 40 - 1 );
    ans3 = ( ( inputValueA + inputValueB + 1 ) / 46 - 1 );
    ans4 = ( ( ( inputValueA / 2 ) + inputValueB + 1 ) * 46 - 1 );

    // 計算結果を出力
    document.calForm.ans1.value = ans1;
    document.calForm.ans2.value = ans2;
    document.calForm.ans3.value = ans3;
    document.calForm.ans4.value = ans4;
}
//-->
</script>

<title>サンプル</title>
</head>

<body>

<form action="#" name="calForm">
<table>
 <tr>
   <td>Aを入力してください</td>
   <td><input type="text" name="a" value=""></td>
 </tr>
 <tr>
   <td>Bを入力してください</td>
   <td><input type="text" name="b" value=""></td>
 </tr>
</table>

<input type="button" name="keisan" value="計算" onClick="Cal();">
<input type="reset" name="reset" value="やり直し">

<hr>

<table>
 <tr>
   <td>結果1</td>
   <td><input type="text" name="ans1" value=""></td>
 </tr>
 <tr>
   <td>結果2</td>
   <td><input type="text" name="ans2" value=""></td>
 </tr>
 <tr>
   <td>結果3</td>
   <td><input type="text" name="ans3" value=""></td>
 </tr>
 <tr>
   <td>結果4</td>
   <td><input type="text" name="ans4" value=""></td>
 </tr>
</table>
</form>

</body>
</html>


2:[質問] 桜庭 [2005/09/05 18:23 ]

AKさん、親切にサンプル作成どうもありがとうございました!
求めていたものはまさにこの形です!
いくら感謝しても足りないくらいです・・・ありがとうございます!

と、少し計算式?で変更したいのですが
ansを端数切り上げで表示したいのですが
切り上げはMath.ceilだというのは調べたのですが
AKさんが作ってくれたサンプルの場合、Math.ceilを
どの部分に挿入すればよろしいのでしょうか。
お手数ですがご教授お願いいたします。重ね重ね申し訳ありません・・


3:[回答] AK [2005/09/05 18:43 ]

桜庭さん、こんにちわ。
おお、あれでOKでしたか。よかったです。

端数を切り上げということですが、四捨五入じゃなくてよいのですよね?
でしたら、単純にお調べ頂いたMath.ceilメソッドでOKですよ。使い方はこんな感じで・・・

    ans1 = Math.ceil( ( inputValueA + inputValueB ) / 40 - 1 );
    ans2 = Math.ceil( ( ( inputValueA / 2 ) + inputValueB ) / 40 - 1 );
    ans3 = Math.ceil( ( inputValueA + inputValueB + 1 ) / 46 - 1 );
    ans4 = Math.ceil( ( ( inputValueA / 2 ) + inputValueB + 1 ) * 46 - 1 );

もし、切り上げじゃなくて四捨五入だと言うなら、ceil部分をfloorに変えてくださいね。

○おまけ○
数値しか入力しないのであれば、数値のみを許容するのもいいと思います。

function numOnly() {
    m = String.fromCharCode( event.keyCode );
    if ( "0123456789\b\r".indexOf( m, 0 ) < 0 ) {
        return false;
    }
    return true;
}

こんな感じにしておいて、入力欄は
<input type="text" name="a" value="" onkeyDown="return numOnly()">
<input type="text" name="b" value="" onkeyDown="return numOnly()">

とすれば、数値のみが入力可能となりますよ。


4:[完了] 桜庭 [2005/09/05 19:06 ]

うまくいきました!
何から何まで本当にありがとうございました^^

おまけ・・ありがとうございます。
数値のみの入力、早速追記してみたのですが
キーボードの上の方の数字キーでは入力可能ですが
右側にあるテンキーでの入力ができない状態で・・・
(109キーボードなど、デスクトップ用のキーボードです)

PC2台で確認(OS2000とXP)したものの同じ状況でした。
テンキー入力可能にはならないのでしょうか?
今のところ追記しない状態です。


5:[保留] AK [2005/09/05 19:19 ]

桜庭さん、こんにちわ。
そうですね・・・確かにテンキーは認識してくれないですね・・・。なんででしょう・・・。

ごめんなさい。調べてみましたが、分かりませんでした。余計なおまけ書いてしまって
ごめんなさいm(_ _;)m

保留にしておきますね。追記しなくても構わなければ、もう一度完了にして頂けると嬉しいです。
回答待つなら、このままにしておいて、博識な方の回答をお待ちします・・・。


6:[完了] 桜庭 [2005/09/05 19:52 ]

申し訳ありません、お手数おかけいたしました。
入力フォームのところに半角数字で入力…と注意事項を書きますので
これで十分ですので完了とさせて頂きます♪

本当に本当に感謝しております。
どうもありがとうございました^^


7:[完了] 人形師 [2005/09/05 20:52 ]

完了になってるところ何なんですけど、
テンキーでもできるようにしたいということであれば、
onkeydownをonkeypressにしてやればよいです。
(個人的には計算ボタンを押したときにエラーメッセージっていうほうが好みですけど^^)


8:[完了] 桜庭 [2005/09/05 21:37 ]

人形師さんアドバイスありがとうございます。
無事テンキー入力する事ができました。感謝です。

皆様本当にどうもありがとうございました。
再度完了のレスをさせていただきます。感謝です<(_ _)>


9:[質問] 桜庭 [2005/09/06 01:37 ]

申し訳ありません。。。再度質問です<(_ _)>

数値を入力した段階で、ボタンをクリックしなくても
自動的に下にAnsが出るようにはならないものでしょうか。

というのも、上の方で要望した手動入力方法の他に、
プルダウンメニューからもabを選べる設定にしたため
プルダウンをマウスで動かしている間に
Ansが自動で表示されると楽だなと思ったもので・・・
数値を入力した段階で自動計算ができるのでしたら
ボタン自体必要ないかなとも思っております。

追記した記述は下記の通りです
function AbSel()
{
 aabb = document.calForm.aabb.value.split(",") ;    // valueをカンマ区切りで取り出す
 document.calForm.a.value = aabb[0] ;
 document.calForm.b.value = aabb[1] ;
}

<BODY>以下には↓を追加しました。

<form action="#" name="calForm">
<select name="aabb" onchange="AbSel()">
<option value=",">abを選択</option>
<option value="1000,10">1</option>
<option value="1000,150">2</option>

実際はabという記述を使ってないので
abの形に置き換えております。
アドバイスよろしくお願いします。


10:[回答] AK [2005/09/06 10:05 ]

桜庭さん、おはようございます。テンキーの解決方法が見つかってよかった!私もスッキリしました。

で、少し変わってしまったんですね。またサンプル作ってみましたが、何箇所か確認したいです。
・プルダウンで1(A:1000,B:10)か2(A:1000,B:150)が選べて、内容がテキストボックスAとBに表示され、しかも自動計算
・テキストボックスAとBがあり、手入力で入力した場合、自動計算

の2点が実装されれば宜しいんですよね?
で、サンプルがコレです。あってるかなー。またしても長くてゴメンなさい。外部ファイル化したほうが良いです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">
// 数値のみ入力可
function numOnly() {
    m = String.fromCharCode( event.keyCode );
    if ( "0123456789\b\r".indexOf( m, 0 ) < 0 ) {
        return false;
    }
    return true;
}

// あちこち自動計算
function AbSel( ipt ) {
    // プルダウンが変更された場合
    if ( ipt == "slt" ) {
        // valueをカンマ区切りで取り出す
        aabb = document.calForm.aabb.value.split( "," );
        // テキストエリアに値を設定
        document.calForm.a.value = aabb[ 0 ];
        document.calForm.b.value = aabb[ 1 ];
        // 計算用
        inputValueA = aabb[ 0 ] - 0;
        inputValueB = aabb[ 1 ] - 0;
    // テキストエリアが変更された場合
    } else if ( ipt == "txt" ) {
        // 計算用
        inputValueA = document.calForm.a.value - 0;
        inputValueB = document.calForm.b.value - 0;
    }
    // 値が設定されている場合
    if ( ( inputValueA != "" ) && ( inputValueB != "" ) ) {
        // 計算
        ans1 = Math.ceil( ( inputValueA + inputValueB ) / 40 - 1 );
        ans2 = Math.ceil( ( ( inputValueA / 2 ) + inputValueB ) / 40 - 1 );
        ans3 = Math.ceil( ( inputValueA + inputValueB + 1 ) / 46 - 1 );
        ans4 = Math.ceil( ( ( inputValueA / 2 ) + inputValueB + 1 ) * 46 - 1 );
        // 計算結果を出力
        document.calForm.ans1.value = ans1;
        document.calForm.ans2.value = ans2;
        document.calForm.ans3.value = ans3;
        document.calForm.ans4.value = ans4;
    // どちらも選ばれていない場合
    } else {
        // クリア
        document.calForm.ans1.value = "";
        document.calForm.ans2.value = "";
        document.calForm.ans3.value = "";
        document.calForm.ans4.value = "";
    }
}
//-->
</script>

<title>サンプル</title>
</head>

<body>

<form action="#" name="calForm">
<select name="aabb" onchange="AbSel( 'slt' )">
 <option value=",">1か2を選択してください</option>
 <option value="1000,10">1</option>
 <option value="1000,150">2</option>
</select>

<table>
<tr>
  <td>A:</td>
  <td><input type="text" name="a" value="" onkeyPress="return numOnly()" onChange="AbSel( 'txt' )"></td>
</tr>
<tr>
  <td>B:</td>
  <td><input type="text" name="b" value="" onkeyPress="return numOnly()" onChange="AbSel( 'txt' )"></td>
</tr>
</table>

<hr>

<table>
<tr>
  <td>結果1</td>
  <td><input type="text" name="ans1" value=""></td>
</tr>
<tr>
  <td>結果2</td>
  <td><input type="text" name="ans2" value=""></td>
</tr>
<tr>
  <td>結果3</td>
  <td><input type="text" name="ans3" value=""></td>
</tr>
<tr>
  <td>結果4</td>
  <td><input type="text" name="ans4" value=""></td>
</tr>
</table>
</form>

</body>
</html>



11:[完了] 桜庭 [2005/09/06 10:43 ]

AKさん、度々ありがとうございます。
求めていたものはこれです!!
本当に感謝です・・<(_ _)>

・・・・外部ファイル化?^^;
もっと勉強してから頑張ってみようと思います。
現段階では私としては大満足です。
本当にご親切にありがとうございました!!


12:[完了] AK [2005/09/06 10:59 ]

桜庭さん、おはようございます。完了済みですが、外部ファイル化についてだけ、書いておきますね。

JavaScriptソースが長くなってしまうと、HTMLファイルも読みにくいですし、他のHTMLファイルでも
同様の動作が必要になった場合、色んなファイルに書き込まなくてはならなくなりますよね。
JavaScriptに変更があった場合、HTMLファイルを何ファイルも直すのは面倒ですので、JavaScriptだけ
別ファイルにしてあげて、それを必要なHTMLファイルで呼び出してあげる、というのが外部ファイル化です。

単純にJavaScriptの部分だけを抜き出し、ファイル名の拡張子をjsにしてあげればOKです。
呼び出したいHTMLファイルでは、そのjsファイルを指定してあげます。

[index.html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="./cal.js"></script>

<title>サンプル</title>
</head>

<body>

<form action="#" name="calForm">
<select name="aabb" onchange="AbSel( 'slt' )">
 <option value=",">1か2を選択してください</option>
 <option value="1000,10">1</option>
 <option value="1000,150">2</option>
</select>

<table>
<tr>
  <td>A:</td>
  <td><input type="text" name="a" value="" onkeyPress="return numOnly()" onChange="AbSel( 'txt' )"></td>
</tr>
<tr>
  <td>B:</td>
  <td><input type="text" name="b" value="" onkeyPress="return numOnly()" onChange="AbSel( 'txt' )"></td>
</tr>
</table>

<hr>

<table>
<tr>
  <td>結果1</td>
  <td><input type="text" name="ans1" value=""></td>
</tr>
<tr>
  <td>結果2</td>
  <td><input type="text" name="ans2" value=""></td>
</tr>
<tr>
  <td>結果3</td>
  <td><input type="text" name="ans3" value=""></td>
</tr>
<tr>
  <td>結果4</td>
  <td><input type="text" name="ans4" value=""></td>
</tr>
</table>
</form>

</body>
</html>

[cal.js]
// 数値のみ入力可
function numOnly() {
    m = String.fromCharCode( event.keyCode );
    if ( "0123456789\b\r".indexOf( m, 0 ) < 0 ) {
        return false;
    }
    return true;
}

// あちこち自動計算
function AbSel( ipt ) {
    // プルダウンが変更された場合
    if ( ipt == "slt" ) {
        // valueをカンマ区切りで取り出す
        aabb = document.calForm.aabb.value.split( "," );
        // テキストエリアに値を設定
        document.calForm.a.value = aabb[ 0 ];
        document.calForm.b.value = aabb[ 1 ];
        // 計算用
        inputValueA = aabb[ 0 ] - 0;
        inputValueB = aabb[ 1 ] - 0;
    // テキストエリアが変更された場合
    } else if ( ipt == "txt" ) {
        // 計算用
        inputValueA = document.calForm.a.value - 0;
        inputValueB = document.calForm.b.value - 0;
    }
    // 値が設定されている場合
    if ( ( inputValueA != "" ) && ( inputValueB != "" ) ) {
        // 計算
        ans1 = Math.ceil( ( inputValueA + inputValueB ) / 40 - 1 );
        ans2 = Math.ceil( ( ( inputValueA / 2 ) + inputValueB ) / 40 - 1 );
        ans3 = Math.ceil( ( inputValueA + inputValueB + 1 ) / 46 - 1 );
        ans4 = Math.ceil( ( ( inputValueA / 2 ) + inputValueB + 1 ) * 46 - 1 );
        // 計算結果を出力
        document.calForm.ans1.value = ans1;
        document.calForm.ans2.value = ans2;
        document.calForm.ans3.value = ans3;
        document.calForm.ans4.value = ans4;
    // どちらも選ばれていない場合
    } else {
        // クリア
        document.calForm.ans1.value = "";
        document.calForm.ans2.value = "";
        document.calForm.ans3.value = "";
        document.calForm.ans4.value = "";
    }
}

だけです。HTMLファイルの<head></head>内に
<script type="text/javascript" src="./cal.js"></script>
と書いてあげましょう。
src="./cal.js"
の部分は、index.htmlと同じ階層にある場合です。フォルダ階層に合わせて変えてくださいね。


13:[完了] 桜庭 [2005/09/06 14:43 ]

何度も丁寧にありがとうございました。
無事外部ファイル化する事ができました。

abのデータ(1.2)の部分が多めなので
外部ファイルにして随分とすっきりした感じです。
大満足しております^^

感謝してもしきれません・・・本当にどうもありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World