フォーム上の値のリアルタイム更新

Question

私の他の質問（これは答えられました）hereとちょっと関連して、次のことが可能かどうか疑問に思っていました（おそらく非常に基本的ですが、

私はユーザーがフォームに何かを入力する2つの入力フィールドを持っています。彼らは "計算"を押すと、関数は入力した値を合計し、それぞれの値に対してそれぞれ1,2％を計算します。

input 1%value
input 2%value
input 3%value
total total

私はリアルタイムでフォームを更新することができるようにするための方法があります：それは次のようになりますか？だからこれは私が意味するように、ユーザーがフィールドに値を入力すると、関数は自動的にtotalなどの値の更新を開始しますか？これを達成するにはどうしたらいいですか？JavaScriptで純粋に行うことはできますか？

おかげ

KIZ

Answer 1

あなたが値（ユーザーの種類としてmeaningly、） 'リアルタイム' を表示したい場合は、あなたがからkeyup値は使用することができます。

• http://www.w3schools.com/jsref/event_onkeyup.asp （純粋ジャバスクリプト用）
• http://api.jquery.com/keyup/（ jqueryのための）

よろしく、

マックス

Answer 2

ここにあなたのための完全な答えを構築することなく、いくつかのヒントがあります：

純粋なJavascriptを要素から.valueを使用して、このような何かが必要になります。

alert(document.getElementById('elementid').value); 

jqueryのようなjavascriptライブラリを使用している場合、何かを使用することができます.val()

編集：あなたが変更

Answer 3

置きonBlurイベントのイベントハンドラを処理するためにonchangeイベントを使用することができます。あなたはcalculateStuff()と呼ばれるJavaScript関数を持っていた場合、あなたの入力要素は、このようにそれを参照することができます：

<input name="something" type="text" onblur="calculateStuff();" value=""> 

をユーザーが場を離れたときonBlurイベントが発生します。あなたが入力している間にそれが起こりたいのであれば、同じ方法でonChangeハンドラを使うことができます。

Answer 4

はい。 JavaScriptでonkeyup/onchangeイベントを呼び出して、ユーザーが何かを入力したかどうかを判断し、数式を実行して値を挿入することによってフォームをリフレッシュするJavaScript関数を呼び出すだけで、イベント内にあるかどうかを判断する必要があります。

また、ぼかしなどの他のイベントリスナーを追加することもできます。

私は使用できないコードを投稿できませんが、Googleはあなたの友人です。

Answer 5

これは簡単です！ボタンを使用する代わりに、各入力にonChange="your_calculate_function()"属性を追加します。