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>