Webプロジェクトに平均スタックを使用しています。フロントエンドは、いくつかのユーザー入力を求める簡単な登録フォームです。たとえば、「購入した商品はいくつですか?」次の質問はラジオボタンです。この製品は大規模か小型か?私の質問は次のとおりです。注文のコストを計算する計算は、商品#42 +(大きい場合は12)、または商品#42 +(小さければ0)です。どのように私はjavascriptでこれをコード化する(私はバックエンドでノードを使用している)。言い換えれば、ユーザーがラジオボタンを選択したときに次の番号を追加する必要があり、数式に入力された商品の数をどのように渡すのかを計算コードに伝えるにはどうすればいいですか?私は小さな値にvalue = 1を割り当て、大きなラジオボタンにvalue = 2を割り当てることから始めました。この問題を回避すると、詳細をコーディングして式を更新できるので、一般的な例が役に立ちます。ありがとうラジオボタンの選択に基づく計算
答えて
あなたは、クライアント側の計算をしたいと要素は次のようにHTML形式である場合:「製品カウント」のIDを持つ製品の数(のための入力と
<h1>Radio Buttons</h1>
<form name="catch-radio" method="post">
<div class="input">
<span class="label">How many products are you buying?</span>
<input id="product-count" type="text" name="product_count" value="0"/>
<br/>
<span class="label">Is this product large or small?</span>
<br/>
<span class="label">Large</span>
<input type="radio" name="product-size" value="12" checked="checked"/>
<br/>
<span class="label">Small</span>
<input type="radio" name="product-size" value="0"/>
</div>
</form>
<div>
<h2>Cost of order:</h2>
<p id="calculation"></p>
</div>
)と商品サイズに対応するラジオボタン( '商品サイズ')を使用すると、フォームフィールドにイベントハンドラを追加することで、コストを計算してページの要素( '計算'のID)に出力できますフォームに変更を登録し、次に計算を実行し、それに応じてページを更新する関数を呼び出すハンドラから次のようにします。
// Cost is the count of products purchased multipled by 42 then added
// to 12 in the case that the product is large, and zero in the case
// that the product is small
function calculate_cost() {
let count = parseInt(document.getElementById('product-count').value);
if (count > 0) {
let size = 0;
for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) {
if (document.getElementsByName('product-size')[i].checked) {
size = parseInt(document.getElementsByName('product-size')[i].value);
break;
}
}
let cost = count * 42 + size
document.getElementById('calculation').innerHTML = cost;
}
}
// handlers for form input change
// call calculate_cost() on change
// note that the text input is an on-change event but for radio buttons
// an onclick handler is needed for each button
for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) {
document.getElementsByName('product-size')[i].onclick = function() {
calculate_cost();
}
}
document.getElementById('product-count').onchange = function() {
calculate_cost();
}
私はここCodePenに本の迅速なデモを置く:http://codepen.io/P1xt/pen/yOKqXP/
を特に興味深いビットは、ラジオボタンのために、あなたが個別に各ボタンのクリックハンドラを追加する必要があるということです(と、それはクリックしないでなければなりません変更ハンドラを使用して、現在選択されているラジオを特定するには、それぞれのラジオが明示的にチェックされていることを確認する必要があります。
注:サーバー側で計算を行う場合は、フォームを送信してから、送信されたフォーム要素から製品数と製品サイズを収集して計算。
なぜラジオボタンの値として0と12を使用しないと、バックエンドは選択した値を追加するだけですか?
したがって、ラジオボタンの値として12と0を割り当てて(ラジオボタンのid = "サイズ"と言うと)、商品数の入力フィールドにid = "product"を指定すると、計算は$(#product).val()* 42 + $(#size).val()? SpoonMeiserの正しい軌道に乗っているかどうか教えてください。 – afzaaldeveloper1
いいえ、idはHTML要素の一意の識別子です。ラジオボタンに名前をつけてください。どのようにバックエンドにあなたの価値を得ていますか?あなたは通常のフォームメカニズムを介してPOSTしていますか? – SpoonMeiser
- 1. JTextFieldsに基づく計算
- 2. 私はラジオボタンの選択に基づいてパーセンテージとルピーの割引を計算したい
- 3. 選択に基づく値の追加
- 4. パーセンテージに基づく値の選択
- 5. ラジオボタンの選択に基づいてフィールド値を増やす
- 6. Datagridview行選択に基づくSelectionChangedイベント
- 7. 言語選択に基づくNSISライセンスファイル
- 8. 関数に基づくサブ選択
- 9. DropDownList1の選択に基づくDropDownList2の自動選択値
- 10. 選択したラジオボタンに基づいてコントロールを表示
- 11. jsonレスポンスに基づいてラジオボタンを選択
- 12. 選択リストの選択に基づく表示フィールド
- 13. ラジオボタンの計算
- 14. フォームの回答に基づくJavaScriptの計算
- 15. 現在のレコードに基づくサブフォームの計算されたコントロール
- 16. 主キーに基づく計算列の指定
- 17. 別の非表示フィールドに基づくSharePoint計算フィールド
- 18. 定数フィールドに基づいて計算
- 19. ラジオボタンの選択に基づいてサブミット時のフォーム動作を変更する
- 20. 選択したラジオボタンに基づいて入力テキストが空白の場合
- 21. RSA Archer - 日付フィールドに基づく計算フィールド
- 22. Django:計算に基づく一括更新
- 23. 選択したラジオボタンに基づいてテキストボックスを有効にします。
- 24. パンダの行選択に基づく複数列の置換
- 25. 前の選択に基づいた動的選択ボックス
- 26. ドロップダウンリストの選択項目に基づく動的検証
- 27. Crystal Reports if-then-elseのパラメータに基づく選択
- 28. オーバーロードされたコンストラクタに基づくポリシークラステンプレートパラメータの選択
- 29. メニュー選択に基づくDivの表示
- 30. MVC3 - フォームの製品選択に基づく表示価格
ありがとうございますP1xt。すぐにこのチュートリアルを利用します – afzaaldeveloper1