Javascriptでリアルタイムに結果を表示する計算フォーム

harada 1,261views 更新:2014年4月7日

Javascript

window.onload = function() {
      document.myform.bt_calc.onclick = calc;
    };
 
    function calc() {
      var plan_unit = 0;
      if ( document.myform.rb_plan_unit[ 0 ].checked == true ) {
        plan_unit = 0;
      }
      else if ( document.myform.rb_plan_unit[ 1 ].checked == true ) {
          plan_unit = 200;
      }
      else if ( document.myform.rb_plan_unit[ 2 ].checked == true ) {
          plan_unit = 500;
      }
      var user = parseInt( document.myform.tx_user.value, 10 );
      if ( ( user < 0 ) || ( document.myform.tx_user.value == "" ) ) {
                document.getElementById('alertUser').innerHTML = "ユーザー数は1人以上入力してください。";
        return;
      }
      var option = 0;
      if ( document.myform.tx_option.value != "" ) {
        option = parseInt( document.myform.tx_option.value, 10 );
      }

      var contract_unit = 0;
      if ( document.myform.rb_contract_unit[ 0 ].checked == true ) {
        contract_unit = 1;
      }
      else {
        if ( document.myform.rb_contract_unit[ 1 ].checked == true ) {
          contract_unit = 10;
        }
      }
      var result = (plan_unit * user + option * 1000) * contract_unit;
            document.getElementById('pri').innerHTML = result;
      document.myform.tx_result.value = result;
      return;
    }

HTML

<form name="myform">
  <table>
    <tr>
      <th>プラン</th>
      <td><label>
          <input name="rb_plan_unit" type="radio" onclick="calc();" checked="checked" />
          0円</label>
        <label>
          <input name="rb_plan_unit" type="radio" onclick="calc();" />
          200円</label>
        <label>
          <input name="rb_plan_unit" type="radio" onclick="calc();" />
          500円</label></td>
    </tr>
    <tr>
      <th>ユーザー数</th>
      <td><input name="tx_user" type="text" size="2" value="1" onkeyup="calc();" />
        ユーザー<span id="alertUser"></span></td>
    </tr>
    <tr>
      <th>追加容量</th>
      <td><input name="tx_option" type="text" size="2" value="0" onfocus="calc();" onkeyup="calc();" />
        GB</td>
    </tr>
    <tr>
      <th>ご契約方法</th>
      <td><label>
          <input name="rb_contract_unit" type="radio" onclick="calc();" checked="checked" />
          月額</label>
        <label>
          <input name="rb_contract_unit" type="radio" onclick="calc();" />
          年額</label></td>
    </tr>
    <tr>
      <th>合計金額</th>
      <td><span id="pri">0</span> 円</td>
    </tr>
  </table>
</form>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません