javascriptでフォームを条件分岐させたい

Question

HTMLで書いたフォームに対して、javascript/jqueryで条件分岐させたいと思っています。

例えばorder_serviceのvalueが仮に１の場合、order_quantity　×　1.5を　order_priceに。
order_serviceのvalueが仮に2の場合、order_quantity　×　５を　order_priceにいった処理です。

現状としては、order_quantity　×　1.5を order_priceに入れ込むことまでは出来たのですが、
条件の部分がどの様に書くべきかわからず困っています。

どなたかご教授願えませんでしょうか。よろしくお願いいたします。

<form class="new_order" id="new_order" action="/orders" accept-charset="UTF-8" method="post">
    <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />

  <select name="order[service]" id="order_service"><option value="">種類お選びください</option>
    <option value="1">選択肢１</option>
        <option value="2">選択肢２</option>
        <option value="3">選択肢３</option>
  <p>
  </p>

  <p>
     <input placeholder="量(個数)を半角で入力してください" type="text" name="order[quantity]" id="order_quantity" />
  </p>


<p class="pay_size">お支払いポイント：<span id="order_price"></span>pt(円)</p>
<br>


<input type="submit" name="commit" value="注文する" class="submit_button" data-disable-with="注文する" />
     
</form>

$(function() {
  var $input = $('#order_quantity');
  var $output = $('#order_price');
  $input.on('input', function(event) {
    var value = 1.5*$input.val();
    $output.text(value);
  });
});

Answer 1

こんな感じですかね？

<script>
$(function() {
  var priceby={1:1.5,2:5,3:15};
  console.log(Object.keys(priceby));
  $('#order_quantity,#order_service').on('input', function(event) {
    var value = parseInt(($('#order_quantity').val()||0)) * ($.inArray($('#order_service').val(),Object.keys(priceby))>=0?priceby[$('#order_service').val()]:0);
    $('#order_price').text(value);
  }).trigger('input');
});
</script>
<form class="new_order" id="new_order" action="/orders" accept-charset="UTF-8" method="post">
<input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
<select name="order[service]" id="order_service"><option value="">種類お選びください</option>
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
<option value="3">選択肢３</option>
<p>
</p>
<p>
<input placeholder="量(個数)を半角で入力してください" type="text" name="order[quantity]" id="order_quantity" />
</p>
<p class="pay_size">お支払いポイント：<span id="order_price"></span>pt(円)</p>
<br>
<input type="submit" name="commit" value="注文する" class="submit_button" data-disable-with="注文する" />
</form>

priceby変数にorder_serviceの値によって何倍にするかリストをつくってあります
手を抜くならoptionのvalueにそれぞれ何倍かという数値をいれてもいいでしょう
（その場合は若干ロジックが変わってきますが）

Comments

[engeng]

早速のご回答感謝いたします。
pricebyに倍数リストを作る＞それを基に計算させるという流れですね！
無事、実装の方できました！助かりました！ありがとうございました！